Babel是什么？

-----------------------------------------------2021.02.09---------------------------------------------

本文章包含的内容

1. 了解全局 - Babel的作用是什么？
2. 学习范围 - Babel的使用方式、配置、Plugins和Presets的区别、preset-env的作用

1. Babel的作用是什么？

1. 首先要明白ES6的语法比如箭头函数在旧版本浏览器因为兼容问题是无法运行的
2. 所以要想办法对旧版本浏览器进行兼容就只能使用旧版本的Javascript语法
3. 但我们不可能手动地对Javascript代码进行更改
4. 进而Babel的作用就出来了，就是将ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法

2. Babel的基本使用

1. 使用命令

创建项目目录

mkdir babel-demo

进入项目目录

cd babel-demo

初始化package.json

npm init -y

安装babel基础库（@babel/core）和能够执行babel命令的工具（@babel/cli）

npm install @babel/core @babel/cli --save-dev

创建src文件夹并在该目录下创建index.js文件，并写一些ES6的语法

const fn = arg => {
    console.log(arg);
};

执行以下命令让babel能够对src文件夹下的index.js文件的语法进行转换并输出到dist文件夹下的index.js文件

babel src -d dist

2. webpack中使用

在webpack中可以做到打包文件的同时使用babel对语法进行转换，就不用每次单独执行命令转换了

在下载了@babel/core的前提下，下载webpack和webpack-cli用来执行webpack打包命令

npm install webpack webpack-cli --save-dev

在webpack中如果想使用babel的编译功能，需要安装babel-loader

npm install babel-loader --save-dev

创建webpack.config.js文件用于配置babel-loader

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
    }
};

执行webpack打包命令会自动引用配置文件中的配置

npx webpack

亦或是在package.json配置script字段，是下面命令打包也可以

npm run build

3. 配置

通过以上执行命令编译也好还是使用webpack打包也好，确实都编译除了文件，但与编译前并无太大区别，因为我们还没有告诉babel是用什么规则去编译，因此跟webpack一样需要配置文件说明打包的规则，babel需要一个配置文件告诉babel如何去编译，有三种配置方式可以实现

1. 在package.json中设置babel字段

直接在package.json文件种配置babel字段即可，此处的presets稍后说明

{
   "name":"babel-test",
   "version":"1.0.0",
   "devDependencies": {
       "@babel/core":"^7.4.5",
       "@babel/cli":"^7.4.4",
       "@babel/preset-env":"^7.4.5"
   }
   "babel": {
       "presets": ["@babel/preset-env"]
   }
}

2. .babelrc文件或.babelrc.js

这两个文件属于同一种配置方式，只不过一个是json文件，一个是js文件
.babelrc

{
    "presets": ["@babel/preset-env"]
}

.babelrc.js

//webpack的配置文件也是这种写法
module.exports = {
    presets: ['@babel/preset-env']
};

这两个配置文件是针对文件夹的，即该配置文件所在的文件夹包括子文件夹都会应用此配置文件的设置，而且下层配置文件会覆盖上层配置文件，通过此种方式可以给不同的目录设置不同的规则

3. babel.config.js文件

babel.config.js的写法与.babelrc.js写法一致，只是babal.config.js会作用于整个目录且只能放在项目跟目录，于.babelrc同时存在的话，.babelrc会将其覆盖，package.json的作用方式与其一样

4. Plugins和Presets

1. plugins

babel对不同的内容有不同的编译插件就是plugings，比如箭头函数转换需要@babel/plugin-transform-arrow-functions这个插件

npm install @babel/plugin-transform-arrow-functions --save-dev

babel.config.js引入插件,这样就能将箭头函数转换为普通函数

module.exports = {
    plugins: ['@babel/plugin-transform-arrow-functions']
};

2. presets

一个一个插件引入去转换不同的语法是不现实的，于是有了预设就是presets这个东西，其实就是一堆预设好的插件集合
安装预设

npm install @babel/preset-es2015 --save-dev

配置babel.config.js,这样就能同时转换各种各样的语法

module.exports = {
    presets: ['@babel/preset-es2015']
};

5. preset-env

js的语法会不断更新，preset也会越来越多，于是babel推出了babel-env预设，这是一个智能预设，只要安装这一个preset，就会根据你设置的目标浏览器，自动将代码中的新特性转换成目标浏览器支持的代码

npm install @babel/preset-env --save-dev

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    chrome: '58'
                }
            }
        ]
    ]
};

编译后我们会发现箭头函数并未被转换成普通函数，那是因为我们设置目标浏览器支持到chrome58，chrome58是原生支持箭头函数的，所以箭头函数就并未被转换，如果我们将目标浏览器设置为支持ie9,由于ie9并不支持箭头，编译后就会发现箭头函数被转换成了普通函数。
目标浏览器版本设置方式详情可参考browserslist,
浏览器特性支持可查询caniuse。

注意1：即使不设置targes，也会有一个默认值，规则为 > 0.5%, last 2 versions, Firefox ESR, not dead。
注意2：官方推荐使用preset-env。

5. 总结

以上为Babel的基础内容，需要深入学习，请参考官方文档——————愿你每天进步一点点，再见。