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来做

2.@babel/preset-env?包含了es，6，7，8转es5的转换规则

3.@babel 是一个组织

配置

webpack.config.js

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

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

npm install --save @babel/polyfill

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

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

//设置【"useBuiltIns": "usage"】，就不需要在入口js里面设置下面的东西了//main.js 顶部
import "@babel/polyfill";

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