使用 script 的 module 属性实现 es6 以上的兼容

几个月前看到了这篇文章 https://philipwalton.com/articles/deploying-es2015-code-in-production-today/,给了我很大的启发,本来是想使用 vue 来当实验对象的,但是在 vue-cli3 的测试版中就有了这个内容,所以这次使用 react 来实验, 现在 cra 中还未采用该方法;

作用:

借用 vue-cli3 中文档的几句话来说明下他的作用:

• 现代版的包会通过 <script type="module"> 在被支持的浏览器中加载 (他的语法是 es6 以上的,可以直接运行)
• 旧版的包会通过 <script nomodule> 加载，并会被支持 ES modules 的浏览器忽略。

修改过程:

首先下载需要的包:

下面列出:

• "babel-core": "^6.26.0"
• "babel-plugin-syntax-dynamic-import": "^6.18.0"
• "babel-plugin-transform-class-properties": "^6.24.1"
• "babel-polyfill": "^6.26.0"
• "babel-preset-env": "^1.7.0"
• "babel-preset-react": "^6.24.1"
• "html-webpack-add-module-plugin": "^1.0.3"
• "uglifyjs-webpack-plugin": "^1.2.7"

去除 package.json 中的 babel 参数

复制 /config/webpack.config.prod.js 一份在当前目录, 命名为 webpack.config.prod.es5.js

在 prod.js 中:

添加引用:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const htmlWebpackAddModulePlugin = require('html-webpack-add-module-plugin')
const fs = require('fs')

说明:

UglifyJsPlugin 是因为 webpack.optimize.UglifyJsPlugin 无法压缩 es6 以上的代码所以需要该插件
htmlWebpackAddModulePlugin 是可以将 生成的 script 转换为 module 或者 nomodule 的插件
fs 是可以对于文件进行一系列操作,这里只是用来判断文件是否存在

修改代码:
修改 oneOf 中的 test: /\.(js|jsx|mjs)$/ 该 loader 将其 options 改为

            options: {
              presets: [
                ['env', {
                  modules: false,
                  useBuiltIns: true,
                  targets: {
                    browsers: [
                      'Chrome >= 60',
                      'Safari >= 10.1',
                      'iOS >= 10.3',
                      'Firefox >= 54',