webpack 4系列笔记（3）babel

JS启用babel转码：

虽然现代的浏览器已经兼容了96%以上的ES6的语法了，但是为了兼容老式的浏览器（IE8、9）我们需要把最新的ES6的语法转成ES5的。那么babel的loader就出场了。

npm i -D babel-loader babel-core babel-preset-env

babel-core：封装了babel编译时需要使用的API

babel-loader：webpack打包时使用babel-loader处理javascript文件

babel-preset-env：根据支持的环境自动选择合适的babel插件的babel-preset，

即babel-preset-es2015、babel-preset-es2016、babel-preset-es2017这3个插件合集。

 

配置webpack:

module: { 
    rules: [ { 
        test: /\.js$/, 
        exclude: /(node_modules)/, // 加快编译速度，不包含node_modules文件夹内容 
        use: { loader: 'babel-loader' } 
       } 
    ] 
}

 

在项目根目录下，添加.babelrc:

{ 
    "presets": ["env"] 
}

 

运行打包命令：npm run build:

报错如下：

 

解决：

办法一：

原因"babel-loader": "^8.0.0" 版本问题。

使用"babel-loader": "^7.1.5"即可解决该错误。

package.json:

{ "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5" }

 

办法二：

安装@babel/core依赖

https://www.npmjs.com/package/@babel/core

npm install --save-dev @babel/core

 

babel的优化：

1. cacheDirectory：设置为true. 可以将指定的目录用来缓存loader的执行结果。打包的效率将会提高。

{ 
    test: /\.js$/, 
    exclude: /(node_modules)/, // 加快编译速度，不包含node_modules文件夹内容 
    use: { 
        loader: 'babel-loader', 
        options: { 
            cacheDirectory: true, 
           } 
    } 
},

 

2. babel 在每个文件都插入了辅助代码，使代码体积过大.babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。 默认情况下会被添加到每一个需要它的文件中。你可以引入 babel runtime 作为一个独立模块，来避免重复引入。

安装：

npm install babel-plugin-transform-runtime --save-dev npm install babel-runtime --save // 生产环境

.babelrc文件：

{ 
    "presets": ["env"], 
    "plugins": [ 
        ["transform-runtime", { 
            "helpers": true, 
            "polyfill": true, 
            "regenerator": true, 
            "moduleName": "babel-runtime" 
        }]
     ]
}

此时，webpack打包的时候，会自动优化重复引入公共方法的问题。

ESlint校验代码格式规范：

安装：

npm install eslint --save-dev npm install eslint-loader --save-dev # 以下是用到的额外的需要安装的eslint的解释器、校验规则等 npm i -D babel-eslint standard

 

vscode开启Auto Fix On Save, 可以保存之后就会自动修复eslint报错。

 

module: { 
    rules: [ { 
        test: /\.js$/, 
        exclude: /(node_modules)/, // 加快编译速度，不包含node_modules文件夹内容 
        use: [
            { 
                loader: 'babel-loader', 
                options: { 
                cacheDirectory: true 
            } 
            }, 
            { 
                loader: 'eslint-loader', // 先进行eslint检查，再进行babel转译 
                options: { 
                    fix: true 
            } 
        }] 
    }] 
}

 

外部扩展：

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法. 这样有些外部引入的包就可以不用打包到bundle.js中.

externals: { 
    // 把一个模块做成外部依赖，不会打包到bundle.js文件中 
    jquery: 'jQuery' 
},