webpack4.0核心概念（十一）———— babel

官⽅⽹站： https://babeljs.io/

中⽂⽹站： https://www.babeljs.cn/

 

Babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放⼼使⽤JS新特性⽽不⽤担⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。

Babel在执⾏编译的过程中，会从项⽬根⽬录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从 loader的options地⽅读取配置。 

• ·语法转换

            const ——> var

             ()=>{} ——> function(){}

• api 处理 

           api： Promise symbol proxy实例方法:[].find。

            解决方案：就是在目标环境中添加缺失的特性

 

babel配置文件,有以下几种

安装 

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

1.babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的⼯作，这部分⼯作需要⽤到 @babel/preset-env来做

[e-mail]/preset-env⾥包含了es，6，7，8转es5的转换规则

[e-mail] 是一个组织

配置

webpack.config.js

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]   //预设插件（语法解析插件）
          }
        }
      }
    ],
 },

babel经过上面的配置，通过上⾯的⼏步 还不够，默认的Babel只⽀持let等⼀些基础的特性转换，Promise等⼀些还有转换过

来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性

 

@babel/polyfill

 

以全局变量的⽅式注⼊进来的。 windows.Promise ，它会造成全局对象的污染

 

npm install --save @babel/polyfill

//main.js 顶部
import "@babel/polyfill";

 polyfill的相关设置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          //目标环境
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11"
        },
        "corejs": 3, //核心库的版本   3的话需要手动安装   npm i [e-mail] -S
        "useBuiltIns": "usage"//按需加载
      }
    ],
    "@babel/preset-react"
  ]
}

设置【"useBuiltIns": "usage"】，就不需要在入口js里面设置下面的东西了

//设置【"useBuiltIns": "usage"】，就不需要在入口js里面设置下面的东西了

//main.js 顶部
import "@babel/polyfill";

 

使用.babelrc文件配置babel时，应如下图调整。更加清爽