From 805bc33afe74a5f7f2862eb87a720ee3a8652c5c Mon Sep 17 00:00:00 2001 From: bplok20010 Date: Fri, 16 Oct 2020 23:45:59 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E6=96=B0=E5=A2=9E=20raw-loader=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E5=99=A8=E5=8F=8Araw=E9=85=8D=E7=BD=AE=E5=8F=82?= =?UTF-8?q?=E6=95=B0=202.=20=E6=96=B0=E5=A2=9EcssModule=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 +++++- lib/compile.js | 2 + lib/defaultOptions.js | 7 ++++ lib/loaders/css.js | 29 +++++++++----- lib/loaders/raw.js | 51 +++++++++++++++++++++++++ package-lock.json | 2 +- package.json | 2 +- test/src/icon.svg | 1 + test/src/index.js | 88 ++++++++++++++++++++++--------------------- 9 files changed, 139 insertions(+), 55 deletions(-) create mode 100644 lib/loaders/raw.js create mode 100644 test/src/icon.svg diff --git a/README.md b/README.md index 9ba33fa..d51951f 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,6 @@ transformEs( src, dest, options ); filter: null,// file => boolean babel: { decoratorsBeforeExport: true, - strictMode: true, useFlow: true, loose: true, runtimeOptions: {}, @@ -73,6 +72,17 @@ transformEs( src, dest, options ); }, eslint: {}, postcss: {}, + // https://www.npmjs.com/package/gulp-dart-scss + scss: {}, + // https://www.npmjs.com/package/gulp-less + less: {}, + cssModule: { + test: /\.module.(less|scss|css)$/, + esModule: true, + }, + raw: { + test: /\.svg$/, + }, } ``` diff --git a/lib/compile.js b/lib/compile.js index 82ab88d..eaf7e0b 100644 --- a/lib/compile.js +++ b/lib/compile.js @@ -5,6 +5,7 @@ const { isDir } = require("./utils"); const babelLoader = require("./loaders/babel"); const eslintLoader = require("./loaders/eslint"); const cssLoader = require("./loaders/css"); +const rawLoader = require("./loaders/raw"); module.exports = async function compile(file, options) { const ignore = @@ -38,6 +39,7 @@ module.exports = async function compile(file, options) { if (!ignore(file)) { stream = eslintLoader(stream, options, meta); stream = cssLoader(stream, options, meta); + stream = rawLoader(stream, options, meta); stream = babelLoader(stream, options, meta); } stream = stream.pipe(gulp.dest(outDir)); diff --git a/lib/defaultOptions.js b/lib/defaultOptions.js index 41b9f91..5e3849e 100644 --- a/lib/defaultOptions.js +++ b/lib/defaultOptions.js @@ -48,6 +48,13 @@ module.exports = function (options) { eslint: {}, scss: {}, less: {}, + cssModule: { + test: /\.module.(less|scss|css)$/, + esModule: true, + }, + raw: { + test: /\.svg$/, + }, }; return defaultsDeep({}, options, defaults); diff --git a/lib/loaders/css.js b/lib/loaders/css.js index 495d415..bd9116f 100644 --- a/lib/loaders/css.js +++ b/lib/loaders/css.js @@ -21,10 +21,6 @@ function isCssFile(file) { return file.extname === ".css" || isScssFile(file) || isLessFile(file); } -function isModuleCssFile(file) { - return /module\.(:?css|less|scss)$/.test(file.path); -} - function handleSassError(error) { const message = new PluginError("sass", error.messageFormatted).toString(); log.save(`Scss:\n${message}\n`); @@ -34,14 +30,29 @@ module.exports = function (stream, options, meta) { const postcssConfig = require("../config/postcss.config"); const config = postcssConfig(options.postcss); - if (isModuleCssFile({ path: meta.filePath })) { + let isCssModule = false; + let esModule = true; + + if (options.cssModule && "esModule" in options.cssModule) { + esModule = options.cssModule.esModule; + } + + if (options.cssModule && options.cssModule.test && options.cssModule.test.test(meta.filePath)) { + isCssModule = true; + } + + if (isCssModule) { config.plugins.push( cssModules({ getJSON: function (_, json) { const fileName = path.basename(meta.outFile) + ".css"; fs.writeFile( meta.outFile + ".js", - `require('./${fileName}');module.exports = ${JSON.stringify(json)};` + `"use strict";require('./${fileName}');${ + esModule + ? 'exports.__esModule = true;exports["default"]=' + : "module.exports=" + }${JSON.stringify(json)};` ).catch(console.log); }, }) @@ -49,11 +60,11 @@ module.exports = function (stream, options, meta) { } return stream - .pipe(gulpif(isScssFile, scss({}).on("error", handleSassError))) + .pipe(gulpif(isScssFile, scss(options.scss || {}).on("error", handleSassError))) .on("error", function () { this.emit("end"); }) - .pipe(gulpif(isLessFile, less())) + .pipe(gulpif(isLessFile, less(options.less || {}))) .on("error", function (err) { handleError.call(this, err, "Less"); }) @@ -63,7 +74,7 @@ module.exports = function (stream, options, meta) { }) .pipe( gulpif( - isModuleCssFile, + () => isCssModule, rename({ extname: path.extname(meta.outFile) + ".css", }) diff --git a/lib/loaders/raw.js b/lib/loaders/raw.js new file mode 100644 index 0000000..95abeba --- /dev/null +++ b/lib/loaders/raw.js @@ -0,0 +1,51 @@ +const gulpif = require("gulp-if"); +const path = require("path"); +const through2 = require("through2"); +const rename = require("gulp-rename"); +const { handleError } = require("../utils"); + +function raw(opts) { + return through2.obj(function (file, _, cb) { + if (file.isBuffer()) { + let content = file.contents.toString(); + content = `export default ${JSON.stringify(content)};`; + file.contents = Buffer.from(content); + } + + cb(null, file); + }); +} + +module.exports = function (stream, options, meta) { + // let esModule = true; + let useRaw = false; + + // if (options.raw && "esModule" in options.raw) { + // esModule = options.raw.esModule; + // } + + if (options.raw && options.raw.test && options.raw.test.test(meta.filePath)) { + useRaw = true; + } + + return stream + .pipe( + gulpif( + () => useRaw, + raw({ + // esModule, + }) + ) + ) + .on("error", function (err) { + handleError.call(this, err, "RAW"); + }) + .pipe( + gulpif( + () => useRaw, + rename({ + extname: path.extname(meta.outFile) + ".js", + }) + ) + ); +}; diff --git a/package-lock.json b/package-lock.json index a3bd2e9..7b51001 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "transform-es", - "version": "5.3.0", + "version": "5.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 85e24ea..9cdf8e5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "transform-es", - "version": "5.3.0", + "version": "5.4.0", "description": "", "keywords": [ "compile", diff --git a/test/src/icon.svg b/test/src/icon.svg new file mode 100644 index 0000000..00c54e6 --- /dev/null +++ b/test/src/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/src/index.js b/test/src/index.js index 680375f..852a80f 100644 --- a/test/src/index.js +++ b/test/src/index.js @@ -2,24 +2,26 @@ const path = require("path"); const fs = require("fs-extra"); const glob = require("fast-glob"); +import a from "./icon.svg"; + var t = require("./cjst"); import z from "./cjst"; // @ta class MyApp { - static a = 3; - title = "test"; - constructor() {} - say() {} + static a = 3; + title = "test"; + constructor() {} + say() {} - a = () => {}; + a = () => {}; } //cst a = 4; async function test() { - const a = await "23"; + const a = await "23"; } test(); @@ -28,41 +30,41 @@ new Promise(r => r(1)); const x = new Set(); -module.exports = function(appSrc = "src", appDist = "dest", options = {}) { - const defaults = { - cwd: process.cwd(), - cleanDist: true, - globOptions: {} - }; - - appSrc = appSrc || "."; - - options = Object.assign({}, defaults, options); - - if (options.cleanDist) { - fs.emptyDirSync(path.resolve(options.cwd, appDist)); - } - - glob( - ["**/?(*).*", "**/*"], - Object.assign( - { - onlyFiles: false - //absolute: true, - }, - options.globOptions, - { - cwd: path.resolve(options.cwd, appSrc) - } - ) - ) - .then(files => { - files.forEach(file => { - const absSrcFile = path.resolve(options.cwd, appSrc, file); - const absDestFile = path.resolve(options.cwd, appDist, file); - - fs.copySync(absSrcFile, absDestFile); - }); - }) - .catch(console.error); +module.exports = function (appSrc = "src", appDist = "dest", options = {}) { + const defaults = { + cwd: process.cwd(), + cleanDist: true, + globOptions: {}, + }; + + appSrc = appSrc || "."; + + options = Object.assign({}, defaults, options); + + if (options.cleanDist) { + fs.emptyDirSync(path.resolve(options.cwd, appDist)); + } + + glob( + ["**/?(*).*", "**/*"], + Object.assign( + { + onlyFiles: false, + //absolute: true, + }, + options.globOptions, + { + cwd: path.resolve(options.cwd, appSrc), + } + ) + ) + .then(files => { + files.forEach(file => { + const absSrcFile = path.resolve(options.cwd, appSrc, file); + const absDestFile = path.resolve(options.cwd, appDist, file); + + fs.copySync(absSrcFile, absDestFile); + }); + }) + .catch(console.error); };