初识babel 7

babel为何物

---

babel是一个用来将ECMAScript 2015+的代码转换成旧版浏览器支持的版本的工具。在如今的开发中可谓是使用率非常高了，除非你还在使用ES5进行开发。接下来我们来根据官方文档详细介绍。

最简单的使用

---

1、先安装一些必要的包

全局安装@babel/cli @babel/core，安装完成检测是否安装成功。

npm install -g @babel/cli @babel/core
babel -V //目前最新版7.2.0

在项目下安装@babel/core @babel/preset-env，同时安装@babel/polyfill

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

那么这些都是什么？我也是刚刚开始学习，所以一个一个查呗！

• @babel/core：这个是babel的核心包，核心的api都在这里。

• @babel/cli ：这是一个通过命令对js文件进行转换的工具。

• @babel/preset-env：指定转换的工作环境

• @babel/polyfill：相当于一个填充，因为babel本身只支持转换箭头函数、结构赋值这些语法糖类的语法，而一些新的API或者Promise函数等是无法转换的。@babel/polyfill就是解决这个问题的。后面我会详细介绍。

2、配置@babel/preset-env

之前babel通过几个预设来确定babel如何进行转换，比如babel-preset-es2015是将ES6转成ES5。但是如果浏览器已经支持了该语法还是会进行了转换。@babel/preset-env很好的解决了这一点，它的工作方式是允许你指定环境的同时，仅转换未支持的功能。
需要配置babel.config.js文件在项目的根目录下：

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      }
    },
  ],
];
module.exports = { presets };

这里支持多种配置方式，以上是直接指定支持的浏览器版本号，我们还可以这样支持市场份额超过5%的浏览器

"targets": {
  "browsers": "> 5%"
}

或者支持最后两个版本的浏览器以及IE7+

"targets": {
   "browsers": ["last 2 versions", "ie >= 7"]
}

当然在node环境下也有专门的配置，这里不做介绍。

3、使用命令行转换

新建一个index.js文件，写一个箭头函数

[1,2,3].map(item=>item);

然后执行babel index.js进行转换，结果在终端打印出转换后的普通函数语法：

$ babel index.js
"use strict";

[1, 2, 3].map(function (item) {
  return item;
});

当然也可以指定输出的位置，比如我要输出到script目录下。

$ babel index.js --out-dir script
Successfully compiled 1 file with Babel.

进阶

---

babel/polyfill包

前面我们说过这个包相当于一个填补功能的工具，用来支持一些babel本身不能直接支持的新的API。因为项目中有很多模块需要使用到这个工具所以把它添加到全局范围下。

注意安装时是--save而不是--save-dev

但是如果是要发布一个单独的工具包，使用@babel/polyfill就有点不太合适了，可以使用另外一个插件transform runtime，避免全局污染。

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

• transform runtime：按需引入，使用到哪些polyfill就引入哪些，但是不是全局的，避免了全局污染。开发框架或者库的时候适合使用。

• babel-polyfill：全局的polyfill，而且很全能，只要不介意这个包的大小，一般建议使用该插件。在大型web项目中比较适合使用。

如何引入babel-polyfill

1、 在应用入口直接import引入

import "babel-polyfill";

2、 在 webpack.config.js中，将 babel-polyfill 加到你的 entry 数组中：

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
}

3、 和preset-env预设配合，按照平台的支持情况引入所需的polyfill模块

const presets = [
    ["@babel/env", {
        targets: {
            node: '0.10.42',
        },
        useBuiltIns: 'usage' 
    }]
];

配置文件.babelrc/babel.config.js

之前版本的babel都是使用.baberc来做配置文件，babel7引入了babel.config.js。但是它并不是.baberc的替代品，二者根据使用的场景不同自行选择。

.babelrc

{
  "presets": ["@babel/preset-flow","@babel/preset-react", "@babel/preset-typescript"],
  "plugins": [...]
}

• @babel/preset-flow预设包含了类型检测插件。

function foo(one: any, two: number, three?): string {} =>
function foo(one, two, three) {}

• @babel/preset-react：顾名思义，包含了react语法的插件。

• @babel/preset-typescript：转换ts语法

babel.config.js

module.exports = function () {
  const presets = [ 
      ["env", {
            "targets": { //指定要转译到哪个环境
                //浏览器环境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node环境
                "node": "6.10", //"current"  使用当前版本的node
                
            },
             //是否将ES6的模块化语法转译成其他类型
             //参数："amd" | "umd" | "systemjs" | "commonjs" | false，默认为'commonjs'
            "modules": 'commonjs',
            //是否进行debug操作，会在控制台打印出所有插件中的log，已经插件的版本
            "debug": false,
            //强制开启某些模块，默认为[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模块，默认为[]
            "exclude": ["transform-es2015-for-of"],
            //babel / preset-env处理polyfill的方式。
            //参数：usage | entry | false，默认为false.
            "useBuiltIns": false
     }]
 ];
  const plugins = [ "@babel/transform-arrow-functions" ];

  return {
    presets,
    plugins
  };
}

其实原理都是一样，一个是配置预设，一个是配置用到的插件，只是写法不同。

useBuiltIns的三个参数都是什么意思呢？

• entry：在引用程序入口导入一次babel / polyfill，多次导入可能会有全局冲突或其他问题。

• usage：自动为每个文件添加特定的polyfill

• false：不要为每个文件自动添加polyfill，也不要将“@ babel / polyfill”导入到单个polyfill。