十九、使用babel处理一般项目中的 ES6语法 ------ 2019-06-01

一、babel的作用：
1、官网解释： Babel 是一个工具链，主要用于将 ECMAScript 2015+（ES6）版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

2、关于ES6的兼容性：ES6语法不是所有的浏览器都支持、都能运行，
Chrome：51 版起便可以支持 97% 的 ES6 新特性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性。
IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）win10之后的浏览器是edge。之前的是IE。

所以为了你的项目能够在所有终端上都能运行，最保险的办法是将你的ES6语法转换成所有浏览器都支持的ES5语法，所以，babel就是用来干这件事的；

简单点说，babel就是将项目中你写的ES6语法，比如箭头函数、map()等语法特性，转换成浏览器能够识别的，低级的JS语法；

二、babel的使用：
1、安装：npm install --save-dev babel-loader @babel/core
（1）babel-loader的作用：babel-loader仅仅是webpack和babel之间沟通的桥梁，并不负责将ES6语法转换成低级的JS语法；
（2）babel/core的作用：babel/core是babel的核心库，最终将ES6语法转换成低级JS语法的就是他；

2、配置：

在webpack的loader配置规则下新增一个节点：
  module: {
        rules: [
            //    file-loader的配置规则
            省略...
            // url-loader的配置规则
            省略...
            // postcss-loader的配置
            省略...
            // babel-loader的配置
            {
                test: /\.js$/,
                // exclude是将node-module文件夹下的JS文件排除，
                //因为第三方插件已经 处理了语法转换
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

三、使用babel/preset-env 让babel将ES6语法转换成ES5
1、安装：npm install @babel/preset-env --save-dev
2、配置

module: {
     rules: [
         //    file-loader的配置规则
         省略...
         // url-loader的配置规则
         省略...
         // postcss-loader的配置
         省略...
         // babel-loader的配置
         {
             test: /\.js$/,
             // exclude是将node-module文件夹下的JS文件排除，
             //因为第三方插件已经 处理了语法转换
             exclude: /node_modules/,
             loader: "babel-loader",
            options:{
                 "presets": ["@babel/preset-env"]
             }
         }
     ]
 },

四、使用babel/polyfill补充浏览器没有实现的语法：

1、安装：npm install --save @babel/polyfill

2、使用：在业务代码文件顶部直接引入：
import "@babel/polyfill";

3、使用了babel/polyfill后，当我们打包项目时，babel/polyfill会自动帮我们在出口文件中实现那些浏览器没有的语法特性，导致出口文件体积骤增，但是，我们可能在我们的项目中仅仅只使用了一两个或者压根没使用那些补充的语法，那我们就不需要这些语法补充啊，怎么办？？？
此时，我们可以在babel-loader的配置规则中新增一个参数：

module: {
        rules: [
            //    file-loader的配置规则
            省略...
            // url-loader的配置规则
            省略...
            // postcss-loader的配置
            省略...
            // babel-loader的配置
            {
                test: /\.js$/,
                // exclude是将node-module文件夹下的JS文件排除，
                //因为第三方插件已经 处理了语法转换
                exclude: /node_modules/,
                loader: "babel-loader",
               options:{
                   "presets": [['@babel/preset-env',{
                        useBuiltIns:'usage'
                    }]]
                }
            }
        ]
    },
useBuiltIns:'usage' 的意思是，只有我们项目中用到的浏览器没有实现的语法特性，在打包的时候，才会帮我们在出口文件中实现，而不是把所有的浏览器没有实现的语法特性都帮我们在出口文件中实现；

五、将babel-loader的配置抽离到 .babelrc 文件中
就是将babel-loader中的options的值，单独放到 .babelrc 文件中；

1、在项目根目录下创建一个 .babelrc 文件
2、将bable-loader的options选项的值（{}这个形式），放到.babelrc文件中即可；

转载于:https://www.jianshu.com/p/b66317b247b8

十九、使用babel处理一般项目中的 ES6语法 ------ 2019-06-01

猜你喜欢