Merge pull request #112 from surmon-china/master

v1.15.0
支持 polyfill

.circleci/config.yml

@@ -2,15 +2,15 @@ workflows:
     version: 2
     build:
         jobs:
-            - build_node_6
             - build_node_8
+            - build_node_10
 
 version: 2
 jobs:
     base: &base
         working_directory: ~/workspace
         docker:
-            - image: circleci/node:6.11
+            - image: circleci/node:8.16.1
         steps:
             - checkout
             - restore_cache:
@@ -27,12 +27,12 @@ jobs:
                 paths:
                     - "node_modules"
 
-    build_node_6:
+    build_node_8:
         <<: *base
         docker:
-        - image: circleci/node:6.11
+        - image: circleci/node:8.16.1
 
-    build_node_8:
+    build_node_10:
         <<: *base
         docker:
-        - image: circleci/node:8.9
+        - image: circleci/node:10.16.3

README.md

@@ -178,6 +178,10 @@ npm 包与 docker 镜像的对比，优点：
 
 	优化项
 
+	- addPolyfill
+
+		是否开启自动 polyfill 功能，开启后会根据 `targets` 参数自动打包对应的 polyfill，并在作为独立的包被页面前置引用，`true` 启用，`false` 禁用
+
 	- extractCommon
 
 		控制是否抽取 entries 间的公共内容到单独的文件中，在有多个 entry 时可以减少结果文件的总体积，`true` 启用，`false` 禁用

lib/clean.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file clean dist
  * @author nighca <nighca@live.cn>
  */

lib/constants/chunks.js

@@ -1,9 +1,10 @@
-/*
+/**
  * @file chunks
  * @author nighca <nighca@live.cn>
  */
 
 module.exports = {
   common: 'fec__common',
-  manifest: 'fec__manifest'
+  manifest: 'fec__manifest',
+  polyfill: 'fec__polyfill'
 }

lib/constants/files.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file file names
  * @author nighca <nighca@live.cn>
  */

lib/constants/transforms.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file all valid transforms
  * @author nighca <nighca@live.cn>
  */

lib/generate.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file generate dist files
  * @author nighca <nighca@live.cn>
  */

lib/prepare.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file prepare behaviors
  * @author nighca <nighca@live.cn>
  */

lib/test.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file run unit test
  * @author nighca <nighca@live.cn>
  */

lib/upload.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file upload files
  * @author nighca <nighca@live.cn>
  */

lib/utils/build-conf.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file config
  * @author nighca <nighca@live.cn>
  */

lib/utils/build-env.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file env info
  * @author nighca <nighca@live.cn>
  */

lib/utils/index.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file util methods
  * @author nighca <nighca@live.cn>
  */

lib/utils/logger.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file logger
  * @author nighca <nighca@live.cn>
  */

lib/utils/paths.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file paths
  * @author nighca <nighca@live.cn>
  */

lib/utils/project.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file project relative util methods
  * @author nighca <nighca@live.cn>
  */

lib/webpack-config/addons/add-polyfill.js

@@ -0,0 +1,48 @@
+/**
+ * @file add polyfill
+ * @author Surmon <i@surmon.me>
+ */
+
+const path = require('path')
+const update = require('immutability-helper')
+const VirtualModulesPlugin = require('webpack-virtual-modules')
+
+const buildEnv = require('../../utils/build-env')
+const chunks = require('../../constants/chunks')
+
+module.exports = (webpackConfig, srcDir, srcPath, { addPolyfill }) => {
+  const isProdEnv = buildEnv.get() === buildEnv.prod
+
+  if (!addPolyfill || !isProdEnv) {
+    return webpackConfig
+  }
+
+  const mockFile = `${chunks.polyfill}.js`
+
+  return update(webpackConfig, {
+    entry: {
+      $merge: {
+        /**
+         * 此处有两点需求：
+         * 1. 经过反复测试和确认，Babel 似乎认工作路径，如果 polyfill 与项目程序本身的路径不一致，则 useBuiltIns 失效
+         * 2. 所以只能造一个假的路径为项目路径的虚拟文件，以模拟 '/xxx/project/src/polyfill.js'
+         * 3. VirtualModulesPlugin 插件目前可确认的最高支持在 Webpack v4，如果后期升级 Webpack 则需检测此处
+         X `[chunks.polyfill]: '@babel/polyfill'` -> 无法被 Babel 理解并替换
+         X `path.resolve(__dirname, ... 'polyfill.js')` -> 无法产出合乎预期的包，始终为全量的 polyfill
+        */
+        [chunks.polyfill]: path.resolve(srcPath, mockFile)
+      }
+    },
+    plugins: {
+      $push: [
+        new VirtualModulesPlugin({
+          [
+            path.join('./', srcDir, '/') + mockFile
+          ]: (
+            `require('@babel/polyfill')`
+          )
+        })
+      ]
+    }
+  })
+}

lib/webpack-config/addons/add-transform.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file transform to loader & config
  * @author nighca <nighca@live.cn>
  */
@@ -38,34 +38,76 @@ const makeBabelPlugin = plugin => (
 
 /**
  * @desc 修改 babel-loader 的配置以适配 webpack2 (enable tree-shaking，由 webpack 来做 module 格式的转换)
- * 添加 preset-env 的 targets
- * 找到 env 这个 preset，添加 { "modules": false, targets }
+ * 如果用户指定了 preset-env，则说明用户需要对 preset-env 进行特殊配置，则使用用户指定的配置
+ * 否则，使用内置的默认配置（动态 polyfill） { "modules": false, useBuiltIns: 'entry', 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
+const makeBabelLoaderOptions = (options, targets, { addPolyfill }) => {
+  options = options || {}
+
+  const presets = options.presets || []
+  const plugins = options.plugins || []
+
+  const babelPresetEnvName = '@babel/preset-env'
+  const presetPolyfillOptions = {
+    useBuiltIns: 'entry',
+    // corejs 选项在 @babel/preset-env 7.4.0 之后可用；
+    // 若后期升级 @babel/preset-env' 版本，则此处需要显式指定版本为 2
+    // corejs: 2,
   }
+  const defaultBabelPresetEnv = [babelPresetEnvName, {
+    ...(
+      addPolyfill && buildEnv.get() === buildEnv.prod
+      ? presetPolyfillOptions
+      : null
+    ),
+    modules: false,
+    targets
+  }]
+
+  const babelPluginTransformRuntimeName = '@babel/plugin-transform-runtime'
+  const defaultBabelPluginTransformRuntime = [babelPluginTransformRuntimeName, {
+    corejs: 2
+  }]
+
+  const babelPresetEnv = presets.find(preset =>
+    typeof preset === 'string'
+    ? preset === babelPresetEnvName
+    : preset[0] === babelPresetEnvName
+  )
+
+  const babelPluginTransformRuntime = plugins.find(plugin =>
+    typeof plugin === 'string'
+    ? plugin === babelPluginTransformRuntimeName
+    : plugin[0] === babelPluginTransformRuntimeName
+  )
+
   return update(options, {
     presets: {
-      $set: (options.presets || []).map(
-        preset => {
-          if (preset === '@babel/preset-env') {
-            return ['@babel/preset-env', { 'modules': false, targets }]
-          }
-          if (preset && preset[0] === '@babel/preset-env') {
-            return ['@babel/preset-env', utils.extend({}, { 'modules': false, targets }, preset[1])]
-          }
-          return preset
-        }
-      ).map(makeBabelPreset)
+      $set: (
+        babelPresetEnv
+        ? []
+        : [defaultBabelPresetEnv]
+      )
+      .concat(presets)
+      .map(makeBabelPreset)
     },
     plugins: {
-      $set: (options.plugins || []).map(makeBabelPlugin)
+      $set: (
+        babelPluginTransformRuntime
+        ? []
+        : [defaultBabelPluginTransformRuntime]
+      )
+      .concat(plugins)
+      .map(makeBabelPlugin)
+    },
+    sourceType: {
+      // 用于指定预期模块类型，若用户未指定，则使用默认值 unambiguous，即：自动推断
+      $set: options.sourceType || 'unambiguous'
     }
   })
 }
@@ -143,7 +185,7 @@ const makeReactBabelOptions = babelOptions => {
 
 function makePostcssOptions({ autoprefixerOptions }) {
   autoprefixerOptions = utils.extend({
-    browsers: []
+    overrideBrowserslist: []
   }, autoprefixerOptions)
   return {
     plugins: () => [autoprefixer(autoprefixerOptions)],
@@ -207,7 +249,7 @@ module.exports = (config, key, transform, buildConfig, post) => {
       }, transform.config)
 
       const postcssOptions = makePostcssOptions({
-        autoprefixerOptions: { browsers: targets.browsers }
+        autoprefixerOptions: { overrideBrowserslist: targets.browsers }
       })
 
       const cssOptions = {
@@ -244,7 +286,7 @@ module.exports = (config, key, transform, buildConfig, post) => {
     }
 
     case transforms.babel: {
-      const babelLoaderOptions = makeBabelLoaderOptions(transform.config, targets)
+      const babelLoaderOptions = makeBabelLoaderOptions(transform.config, targets, optimization)
       config = addDefaultExtension(config, extension)
       config = update(config, {
         module: { rules: {
@@ -266,7 +308,8 @@ module.exports = (config, key, transform, buildConfig, post) => {
             loader: 'babel',
             options: makeBabelLoaderOptions(
               makeReactBabelOptions(transformConfig.babelOptions),
-              targets
+              targets,
+              optimization
             )
           })]
         } }
@@ -302,7 +345,7 @@ module.exports = (config, key, transform, buildConfig, post) => {
             extension,
             context,
             exclude,
-            { loader: 'babel', options: makeBabelLoaderOptions(babelOptions, targets) },
+            { loader: 'babel', options: makeBabelLoaderOptions(babelOptions, targets, optimization) },
             { loader: 'ts', options: tsLoaderOptions }
           )]
         } }
@@ -349,7 +392,7 @@ module.exports = (config, key, transform, buildConfig, post) => {
       // https://github.com/vuejs/vue-loader/blob/407ddbd9e442fc8551d662d1709fcffd35419f21/lib/loader.js#L461
       // 这里把 use 中的 postcss-loader 项干掉，交给 vue-loader 的 style-compiler 调用 postcss 处理
       const postcssOptionsInVue = makePostcssOptions({ autoprefixerOptions: {
-        browsers: targets.browsers
+        overrideBrowserslist: targets.browsers
       } })
       const loadersInVue = config.module.rules.reduce(
         (loaders, rule) => {

lib/webpack-config/addons/common-chunks.js

@@ -1,28 +1,36 @@
-/*
+/**
  * @file config for common-chunks
  * @author nighca <nighca@live.cn>
  */
 
 const update = require('immutability-helper')
 const chunks = require('../../constants/chunks')
+const buildEnv = require('../../utils/build-env')
 
 module.exports = (config, optimization) => {
+  const { addPolyfill } = optimization
   const optCommon = optimization.extractCommon
   const optVendor = optimization.extractVendor
 
+  const chunksName = (
+    addPolyfill && buildEnv.get() === buildEnv.prod
+    ? chunk => chunk.name !== chunks.polyfill
+    : 'all'
+  )
+
   const cacheGroups = {}
 
   if (optVendor) {
     cacheGroups[optVendor] = {
       name: optVendor,
-      chunks: 'all',
+      chunks: chunksName,
       minSize: Infinity
     }
   }
 
   const splitChunksOptions = optCommon
-    ? { chunks: 'all', name: chunks.common, cacheGroups }
-    : { chunks: 'all', name: chunks.common, minSize: Infinity, cacheGroups }
+    ? { chunks: chunksName, name: chunks.common, cacheGroups }
+    : { chunks: chunksName, name: chunks.common, minSize: Infinity, cacheGroups }
 
   return update(config, { optimization: { splitChunks: { $set: splitChunksOptions } } })
 }

lib/webpack-config/addons/compress-image.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file compress-image
  * @author nighca <nighca@live.cn>
  */

lib/webpack-config/addons/configure-postcss.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file config for configure postcss
  * @author nighca <nighca@live.cn>
  */

lib/webpack-config/addons/configure-proxy.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file config for devServer proxy
  * @author nighca <nighca@live.cn>
  */