webpack学习记录(三)--使用 Babel 处理 ES6/7 语法 转义为ES5

BABEL官网：https://babeljs.io/setup

安装依赖包：

npm i babel-loader @babel/core @babel/preset-env -D
//生产依赖，兼容低版本浏览器
npm install --save @babel/polyfill


#  在 webpack.config.js 中
#  @babel/preset-env这个包官方说是智能预设，怎么智能了，你只要给出一个浏览器的版本号，就知道哪些# 语法要转，哪些语法不要转。可以有效的避免把不需要转换的语法也转换了，浪费性能，浏览器都有这个语
# 法，再加个转换就没必要了。
# babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。（ast=抽象语法 # 树）


module: {
  rules: [
    {
         test: /\.js$/,
         exclude: /node_modules/,//不需要对第三方模块进行转换，耗费性能
         loader: "babel-loader" , //bable-loader打通了webpack和bable  bable-core
         options:{
            "presets": [["@babel/preset-env",{
                    targets: {
      //这个项目运行在大于什么版本的浏览器上，已经支持es6的语法的高版本浏览器就不需要转义成es5了
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1",
                  },
                useBuiltIns:'usage' //按需添加polyfill,把用到的代码都转成低版本浏览器兼容的
            }]]
        }
    }
  ]
}

# 在 index.js 中：

//在业务代码运行之前最顶部导入 webpack4已经不需要这一步，它会自动在需要的时候使@babel/polyfill
import "@babel/polyfill";  

注意：在开发类库，第三方模块或组件库时不能用 @babel/polyfill 这种方案，因为会把声明的变量变成全局变量，会污染全局环境。

安装：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs2

在 webpack.config.js 中

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,//不需要对第三方模块进行转换，耗费性能
        loader: "babel-loader" ,
        options:{
            "plugins": [["@babel/plugin-transform-runtime",{
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }]]
        }
    }
  ]
}

由于babel需要配置的内容非常多，我们需要在项目根目录下创建一个 .babelrc 文件。

就不需要在 webpack.config.js 中写 babel 的配置了。

在 .babelrc 中：

{
            "plugins": [["@babel/plugin-transform-runtime",{
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }]]
        }