v1.18.0 (polyfill type) (#126)

* v1.18.0

* fix: 错误的引用

* up deeps & corejs@3

* fix: less javascriptEnabled deprecated

* fix: 垃圾 less

* fix: less

* UP

* remove yarn.lock

* doc: update

* add 'proposalEnabled'

* proposalEnabled -> proposalsEnabled

* chore: version

* chore: version

Author: surmon-china

build-config.md

@@ -200,9 +200,16 @@ const apiUrl = "http://foobar.com/api" + 'test'
 
 - **`optimization.addPolyfill`**
 
-    类型：`boolean`
+    类型：`boolean` 或 `string`
+
+    是否开启自动 polyfill 功能，以及开启何种形式的 polyfill；开启后会根据 `targets.browsers` 参数自动实现对应的 polyfill；
 
-    是否开启自动 polyfill 功能，开启后会根据 `targets.browsers` 参数自动打包对应的 polyfill，并在作为独立的包被页面前置引用，`true` 启用，`false` 禁用
+    | value  | desc |
+    | ------------- | ------------- |
+    | `false`  | 不开启 `polyfill` |
+    | `true`  | 开启 `polyfill`，使用默认的方式 (`"global"`) 进行 `polyfill` |
+    | `"global"`  | 开启基于 `@babel/preset-env` 的 `polyfill`，polyfill 会被作为独立的包被页面前置引用，会污染全局内置对象，适合普通应用 |
+    | `"runtime"`  | 开启基于 `@babel/plugin-transform-runtime` 的 `polyfill`，生成辅助函数以替换特定方法，不会污染全局命名空间，适用于工具类库 |
 
 - **`optimization.extractCommon`**
 

lib/constants/polyfill.js

@@ -0,0 +1,20 @@
+/**
+ * @file polyfill type
+ * @author Surmon <i@surmon.me>
+ */
+
+exports.polyfillType = {
+  global: 'global',
+  runtime: 'runtime'
+}
+
+// 是否 polyfill 尚在提案阶段的 API
+exports.proposalsEnabled = false
+
+exports.isGlobalPolyfill = type => {
+  return type === exports.polyfillType.global || type === true
+}
+
+exports.isRuntimePolyfill = type => {
+  return type === exports.polyfillType.runtime
+}

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

@@ -9,15 +9,19 @@ const VirtualModulesPlugin = require('webpack-virtual-modules')
 
 const buildEnv = require('../../utils/build-env')
 const chunks = require('../../constants/chunks')
+const { proposalsEnabled, isGlobalPolyfill } = require('../../constants/polyfill')
 
 module.exports = (webpackConfig, srcDir, srcPath, { addPolyfill }) => {
   const isProdEnv = buildEnv.get() === buildEnv.prod
 
-  if (!addPolyfill || !isProdEnv) {
+  if (!isGlobalPolyfill(addPolyfill) || !isProdEnv) {
     return webpackConfig
   }
 
   const mockFile = `${chunks.polyfill}.js`
+  const coreJSEntry = proposalsEnabled
+    ? 'core-js'
+    : 'core-js/stable'
 
   return update(webpackConfig, {
     entry: {
@@ -27,7 +31,7 @@ module.exports = (webpackConfig, srcDir, srcPath, { addPolyfill }) => {
          * 1. 经过反复测试和确认，Babel 似乎认工作路径，如果 polyfill 与项目程序本身的路径不一致，则 useBuiltIns 失效
          * 2. 所以只能造一个假的路径为项目路径的虚拟文件，以模拟 '/xxx/project/src/polyfill.js'
          * 3. VirtualModulesPlugin 插件目前可确认的最高支持在 Webpack v4，如果后期升级 Webpack 则需检测此处
-         X `[chunks.polyfill]: '@babel/polyfill'` -> 无法被 Babel 理解并替换
+         X `[chunks.polyfill]: 'core-js'` -> 无法被 Babel 理解并替换
          X `path.resolve(__dirname, ... 'polyfill.js')` -> 无法产出合乎预期的包，始终为全量的 polyfill
         */
         [chunks.polyfill]: path.resolve(srcPath, mockFile)
@@ -39,7 +43,10 @@ module.exports = (webpackConfig, srcDir, srcPath, { addPolyfill }) => {
           [
             path.join('./', srcDir, '/') + mockFile
           ]: (
-            `require('@babel/polyfill')`
+            `
+            require('${coreJSEntry}')
+            require('regenerator-runtime/runtime')
+            `
           )
         })
       ]

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

@@ -11,6 +11,7 @@ const buildEnv = require('../../utils/build-env')
 const paths = require('../../utils/paths')
 const utils = require('../../utils')
 const transforms = require('../../constants/transforms')
+const { proposalsEnabled, isGlobalPolyfill, isRuntimePolyfill } = require('../../constants/polyfill')
 
 const regexpEscape = s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
 
@@ -43,35 +44,39 @@ const makeBabelPlugin = plugin => (
  * 注意后续可能要修改这边逻辑，考虑会对 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, { addPolyfill }) => {
   options = options || {}
 
   const presets = options.presets || []
   const plugins = options.plugins || []
+  const corejsOptions = {
+    version: 3,
+    proposals: proposalsEnabled
+  }
 
   const babelPresetEnvName = '@babel/preset-env'
-  const presetPolyfillOptions = {
-    useBuiltIns: 'entry',
-    // corejs 选项在 @babel/preset-env 7.4.0 之后可用；
-    // 若 @babel/preset-env 版本 >= 7.4.0，则此处需要显式指定版本为 2
-    corejs: 2,
-  }
   const defaultBabelPresetEnv = [babelPresetEnvName, {
-    ...(
-      addPolyfill && buildEnv.get() === buildEnv.prod
-      ? presetPolyfillOptions
-      : null
-    ),
+    // https://babeljs.io/docs/en/babel-preset-env#modules
+    // 将 ES6 module 转换为指定 module -> 不转换
     modules: false,
-    targets
+    targets,
+    ...(
+      // global polyfill
+      isGlobalPolyfill(addPolyfill)
+      && buildEnv.get() === buildEnv.prod
+      && {
+        // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
+        useBuiltIns: 'entry',
+        corejs: corejsOptions
+      }
+    )
   }]
 
   const babelPluginTransformRuntimeName = '@babel/plugin-transform-runtime'
   const defaultBabelPluginTransformRuntime = [babelPluginTransformRuntimeName, {
-    corejs: 2
+    // https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs
+    corejs: corejsOptions
   }]
 
   const babelPresetEnv = presets.find(preset =>
@@ -98,9 +103,10 @@ const makeBabelLoaderOptions = (options, targets, { addPolyfill }) => {
     },
     plugins: {
       $set: (
-        babelPluginTransformRuntime
-        ? []
-        : [defaultBabelPluginTransformRuntime]
+        // 用户未主动配置插件且启用了 runtime 类型的 polyfill，则应用插件
+        !babelPluginTransformRuntime && isRuntimePolyfill(addPolyfill)
+        ? [defaultBabelPluginTransformRuntime]
+        : []
       )
       .concat(plugins)
       .map(makeBabelPlugin)

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

@@ -6,14 +6,15 @@
 const update = require('immutability-helper')
 const chunks = require('../../constants/chunks')
 const buildEnv = require('../../utils/build-env')
+const { isGlobalPolyfill } = require('../../constants/polyfill')
 
 module.exports = (config, optimization) => {
   const { addPolyfill } = optimization
   const optCommon = optimization.extractCommon
   const optVendor = optimization.extractVendor
 
   const chunksName = (
-    addPolyfill && buildEnv.get() === buildEnv.prod
+    isGlobalPolyfill(addPolyfill) && buildEnv.get() === buildEnv.prod
     ? chunk => chunk.name !== chunks.polyfill
     : 'all'
   )

lib/webpack-config/addons/gen-pages.js

@@ -10,6 +10,7 @@ const buildEnv = require('../../utils/build-env')
 const paths = require('../../utils/paths')
 const utils = require('../../utils')
 const chunks = require('../../constants/chunks')
+const { isGlobalPolyfill } = require('../../constants/polyfill')
 
 module.exports = (config, pageMap, publicUrl, optimization) => {
   const pages = Object.keys(pageMap).map(
@@ -26,7 +27,7 @@ module.exports = (config, pageMap, publicUrl, optimization) => {
   const baseChunks = []
 
   if (buildEnv.get() === buildEnv.prod) {
-    if (addPolyfill) {
+    if (isGlobalPolyfill(addPolyfill)) {
       baseChunks.push(chunks.polyfill)
     }
     if (optCommon) {