diff --git a/README.md b/README.md index 81f87bf..310a0cb 100644 --- a/README.md +++ b/README.md @@ -184,7 +184,7 @@ npm 包与 docker 镜像的对比,优点: - extractVendor - 控制是否抽取固定依赖(vendor),要求传入一个入口文件名(`entry`),该 entry 的内容将会被认为是固定依赖,被抽取到单独的文件中,而不会重复出现在每个 entry 的结果文件里。一方面它可以更精确地实现抽取公共内容的效果,另外一方面,在 vendor entry 内容不变的情况下,结果文件本身的 hash 不会改变,可以更充分地利用浏览器缓存。典型的 vendor entry 的内容形如: + 控制抽取固定依赖(vendor)的行为,要求传入一个入口文件名(`entry`)以启用;该 entry 的内容将会被认为是固定依赖,被抽取到单独的文件中,而不会重复出现在每个 entry 的结果文件里。一方面它可以更精确地实现抽取公共内容的效果,另外一方面,在 vendor entry 内容不变的情况下,结果文件本身的 hash 不会改变,可以更充分地利用浏览器缓存。典型的 vendor entry 的内容形如: ```javascript import 'react' @@ -194,7 +194,11 @@ npm 包与 docker 镜像的对比,优点: - compressImage - 是否压缩图片(png, jpe?g, gif) + 是否压缩图片(png, jpe?g, gif),`true` 启用,`false` 禁用 + + - transformDeps + + 是否对第三方依赖包(node_modules 中的内容)的 Javascript 内容进行转换(builder 默认会跳过对依赖包 Javascript 内容的转换,以提升构建效率)。这里传入 `true` 表示全部进行转换,`false` 则全部不转换;也可以传入包名列表来指定需要转换的第三方依赖包,如传入 `[ "react", "mobx" ]`,表示仅对包 react 与包 mobx 的 Javascript 内容进行转换 * test diff --git a/lib/utils/build-conf.js b/lib/utils/build-conf.js index d8103e3..b1a0f79 100644 --- a/lib/utils/build-conf.js +++ b/lib/utils/build-conf.js @@ -12,20 +12,25 @@ const paths = require('./paths') const logger = require('./logger') /** - * The complete Triforce, or one or more components of the Triforce. * @typedef {object} Engines * @property {string} builder - required builder version range */ /** - * The complete Triforce, or one or more components of the Triforce. * @typedef {object} TestConfig * @property {string[]} setupFiles - files to run before each test * @property {object} moduleNameMapper - map for modules, like https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string */ /** - * The complete Triforce, or one or more components of the Triforce. + * @typedef {object} Optimization + * @property {boolean} extractCommon 是否抽取 entries 间的公共内容到单独的文件中 + * @property {string} extractVendor 抽取固定依赖行为 + * @property {boolean} compressImage 是否压缩图片 + * @property {boolean|string[]} transformDeps 是否对第三方依赖包的 Javascript 内容进行转换 + */ + +/** * @typedef {object} BuildConfig * @property {string} extends - target config to extend * @property {string} publicUrl @@ -38,9 +43,10 @@ const logger = require('./logger') * @property {string[]} transformIncludes - 构建时需要被包含进来(被 transformer 处理)的第三方内容 * @property {object} envVariables - 注入到代码中的环境变量 * @property {object} isomorphicTools - ssr 相关的 webpack-isomorphic-tools config - * @property {object} optimization + * @property {Optimization} optimization * @property {object} devProxy * @property {object} deploy + * @property {object} targets * @property {TestConfig} test * @property {Engines} engines */ diff --git a/lib/webpack-config/addons/add-transform.js b/lib/webpack-config/addons/add-transform.js index d8f0120..fd02cc6 100644 --- a/lib/webpack-config/addons/add-transform.js +++ b/lib/webpack-config/addons/add-transform.js @@ -36,10 +36,16 @@ const makeBabelPlugin = plugin => ( : [adaptBabelPluginName(plugin[0]), ...plugin.slice(1)] ) -// 修改 babel-loader 的配置以适配 webpack2 (enable tree-shaking,由 webpack 来做 module 格式的转换) -// 添加 preset-env 的 targets -// 找到 env 这个 preset,添加 { "modules": false, targets } -// 注意后续可能要修改这边逻辑,考虑会对 import / export 进行转换的不一定只有 env 这个 preset +/** + * @desc 修改 babel-loader 的配置以适配 webpack2 (enable tree-shaking,由 webpack 来做 module 格式的转换) + * 添加 preset-env 的 targets + * 找到 env 这个 preset,添加 { "modules": false, targets } + * 注意后续可能要修改这边逻辑,考虑会对 import / export 进行转换的不一定只有 env 这个 preset + * @param {object} options babel options + * @param {object} targets babel env targets: https://babeljs.io/docs/en/babel-preset-env#targets + * @return {object} + * TODO: 检查现在 webpack4 是不是还需要 modules: false 的逻辑 + */ const makeBabelLoaderOptions = (options, targets) => { if (!options) { return options @@ -87,7 +93,7 @@ const adaptLoader = ({ loader, options }) => { return loaderObj } -const makeRule = (extension, context, ...loaderList) => { +const makeRule = (extension, context, exclude, ...loaderList) => { const rule = { test: makeExtensionPattern(extension), use: loaderList.map(adaptLoader) @@ -104,10 +110,10 @@ const makeRule = (extension, context, ...loaderList) => { rule.issuer = makeExtensionPattern(context) } - // 针对后缀为 js 的 transform,控制范围(不对依赖做转换) - if (extension === 'js') { - rule.exclude = /(node_modules)/ + if (exclude != null) { + rule.exclude = exclude } + return rule } @@ -145,12 +151,24 @@ function makePostcssOptions({ autoprefixerOptions }) { } } +/** + * @desc 构造处理 Javascript 内容时排除依赖用的正则 + * @param {boolean|string[]} transformDeps 是否排除依赖,或需要被处理(不应该被排除)的依赖包名 + * @return {RegExp} + */ +function makeJsExcludePattern(transformDeps) { + if (Array.isArray(transformDeps)) { + return new RegExp(`node_modules/(?!(${transformDeps.join('|')})/).*`) + } + return transformDeps ? null : /node_modules\// +} + module.exports = (config, key, transform, buildConfig, post) => { if (!key || typeof key !== 'string') { throw new TypeError(`Invalid transform key: ${JSON.stringify(key)}`) } - const { targets } = buildConfig + const { targets, optimization } = buildConfig const [extension, context] = key.split('@') const isTesting = buildEnv.get() === buildEnv.test @@ -171,6 +189,13 @@ module.exports = (config, key, transform, buildConfig, post) => { return config } + // 针对后缀为 js 的 transform,控制范围(不对依赖做转换) + const exclude = ( + extension === 'js' + ? makeJsExcludePattern(optimization.transformDeps) + : null + ) + switch(transform.transformer) { case transforms.css: case transforms.less: @@ -212,7 +237,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = update(config, { module: { rules: { - $push: [makeRule(extension, context, ...loaders)] + $push: [makeRule(extension, context, exclude, ...loaders)] } } }) break @@ -223,7 +248,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = addDefaultExtension(config, extension) config = update(config, { module: { rules: { - $push: [makeRule(extension, context, { loader: 'babel', options: babelLoaderOptions })] + $push: [makeRule(extension, context, exclude, { loader: 'babel', options: babelLoaderOptions })] } } }) break @@ -237,7 +262,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = addDefaultExtension(config, extension) config = update(config, { module: { rules: { - $push: [makeRule(extension, context, { + $push: [makeRule(extension, context, exclude, { loader: 'babel', options: makeBabelLoaderOptions( makeReactBabelOptions(transformConfig.babelOptions), @@ -276,6 +301,7 @@ module.exports = (config, key, transform, buildConfig, post) => { $push: [makeRule( extension, context, + exclude, { loader: 'babel', options: makeBabelLoaderOptions(babelOptions, targets) }, { loader: 'ts', options: tsLoaderOptions } )] @@ -289,7 +315,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = addDefaultExtension(config, extension) config = update(config, { module: { rules: { - $push: [makeRule(extension, context, { loader: transform.transformer, options: transform.config })] + $push: [makeRule(extension, context, exclude, { loader: transform.transformer, options: transform.config })] } } }) break @@ -299,7 +325,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = update(config, { module: { rules: { $push: [ - makeRule(extension, context, { + makeRule(extension, context, exclude, { loader: 'file', options: { name: 'static/[name]-[hash].[ext]' } }) @@ -342,7 +368,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = update(config, { module: { rules: { $push: [ - makeRule(extension, context, { + makeRule(extension, context, exclude, { loader: 'vue', options }) @@ -356,7 +382,7 @@ module.exports = (config, key, transform, buildConfig, post) => { config = update(config, { module: { rules: { $push: [ - makeRule(extension, context, { + makeRule(extension, context, exclude, { loader: 'svg-sprite', options: { // TODO: @@ -375,7 +401,7 @@ module.exports = (config, key, transform, buildConfig, post) => { default: { config = update(config, { module: { rules: { - $push: [makeRule(extension, context, { loader: transform.transformer, options: transform.config })] + $push: [makeRule(extension, context, exclude, { loader: transform.transformer, options: transform.config })] } } }) } diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 6c489bc..fd523af 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1,6 +1,6 @@ { "name": "fec-builder", - "version": "1.13.0", + "version": "1.14.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b10f460..6427994 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fec-builder", - "version": "1.13.0", + "version": "1.14.0", "bin": { "fec-builder": "./bin/fec-builder" }, diff --git a/preset-configs/angular.json b/preset-configs/angular.json index a0d23b1..878152e 100644 --- a/preset-configs/angular.json +++ b/preset-configs/angular.json @@ -17,7 +17,8 @@ "@babel/plugin-syntax-import-meta", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-json-strings" - ] + ], + "sourceType": "unambiguous" } }, "html": "html" diff --git a/preset-configs/default.json b/preset-configs/default.json index 4dbd54f..341ee2f 100644 --- a/preset-configs/default.json +++ b/preset-configs/default.json @@ -30,7 +30,8 @@ "@babel/plugin-syntax-import-meta", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-json-strings" - ] + ], + "sourceType": "unambiguous" } }, "css": "css", @@ -67,7 +68,8 @@ "optimization": { "extractCommon": true, "extractVendor": "", - "compressImage": false + "compressImage": false, + "transformDeps": false }, "devProxy": {}, "deploy": { diff --git a/preset-configs/react.json b/preset-configs/react.json index 2a2dc6e..7a8e075 100644 --- a/preset-configs/react.json +++ b/preset-configs/react.json @@ -16,7 +16,8 @@ "@babel/plugin-syntax-import-meta", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-json-strings" - ] + ], + "sourceType": "unambiguous" } } }, @@ -36,7 +37,8 @@ "@babel/plugin-syntax-import-meta", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-json-strings" - ] + ], + "sourceType": "unambiguous" } } }, diff --git a/samples b/samples index d8b24b4..2e04c11 160000 --- a/samples +++ b/samples @@ -1 +1 @@ -Subproject commit d8b24b40a325113d2612872ca339929ba5213e9d +Subproject commit 2e04c1117a232e89ae6c00051a68cfeb2413d370