Babel在项目中的配置

Babel简介

Babel是一个广泛使用的Es6转码器，可以将用es6写的代码转换为es5的形式。这样就不用担心写出的es6代码无法运行了。

安装

下面的命令可以在项目中安装Babel

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

配置文件.babelrc

Babel的配置文件是.babelrc,是存放在项目的根目录下，用来设置转码规则和插件。

{
    "presets":[                //设置转码规则
              "@babel/env",            //最新转码规则
        "@babel/preset-react"    //react转码规则
        ],
  "plugins":[]    //设置插件
  }

命令行转码

Babel提供命令行工具@babel/cli，用于命令行转码。

# 转码结果输出到标准输出
$ npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 参数生成source map文件
$ npx babel src -d lib -s

其他模块

• @babel/node模块的babel-node命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。
• 钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。
• babelAPI

如果某些代码需要调用Babel的API进行转码，就要使用@babel/core模块。

• @babel/polyfill Babel默认只转换新的JS语法，而不转换新的API。如果想要这些方法运行，必须使用babel-ployfill为当前环境提供一个垫片。