Babel 7 基础入门学习（详细版）

可以在我的GitHub上下载示例代码。

前言

之前一直想要系统的学习一下Babel的使用规则，看过阮一峰老师的《Babel基础入门》，无奈此教程是2016年出的，而Babel 7都已经出来啦，于是，在搜集了各种资料后，关于如何快速上手Babel，我大概精简了以下步骤，如有错误，希望大家能指出来，谢谢！

使用指南

1.使用手册——Babel官网（最好看着官网提示的步骤一点一点来）

2.配置环境——创建项目文件babel-demo，进入项目后 git bash，然后输入 npm init -y，然后项目文件就会出现配置文件：package.json

3.下载相应的包

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill或者简写：npm install -D @babel/core @babel/cli @babel/preset-env
npm install @babel/polyfill

（--save-dev(简写-D）表示该版本只适用于开发环境中，命令会自动帮你写在package.json的devDependencies中

--save（或者不写）则表示该版本适用于生产环境中，命令会自动帮你写在package.json的dependencies中）

注释：先解释一下使用Babel前要下载的包的意义和用法

如下。

1). @babel/cli是一个允许你从终端使用 babel 的工具。即用于命令行转码

基本用法如下。


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

2). Babel 的核心功能在 @babel/core模块，如果某些代码需要调用Babel的API进行转码，则就需要此模块。

用法如下

var babel = require('@babel/core');// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {result; // => { code, map, ast }
});// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

例子如下。

在src目录文件新建一个core.js文件，输入如下

var es6Code = 'let x = n => n + 1';
var envCode = require('@babel/core').transform(es6Code, {presets: ["@babel/env"]}).code;console.log(envCode);

之后在bash中输入

$ npx babel src -d dist
//npx如果不懂请自行上网搜寻

编译成功，你会在目录里看到dist，里面有已经编译好的core.js文件，如下

"use strict";var es6Code = 'let x = n => n + 1';var envCode = require('@babel/core').transform(es6Code, {presets: ["@babel/env"]
}).code;console.log(envCode);

如果想看envCode的结果，也可以在bash中输入

$ node src/core.js

3). @babel/polyfill 模块包括core-js和自定义regenerator runtime 来模拟完整的 ES2015+ 环境。

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

4). @babel/preset-env 根据你需要支持的环境（配合targets中的浏览器信息）自动决定适合你的 Babel 插件

4.使用以下内容在项目的根目录中创建名为 babel.config.js 的配置文件：(配置文件很重要）

module.exports = function(api){api.cache(true)const presets = [["@babel/env", {targets: {ie:"10",edge: "17",firefox: "60",chrome: "67",safari: "11.1"},useBuiltIns: "usage"}]];const plugins = [];return {presets,plugins}
}//target表示你想要支持的浏览器的最低型号
// useBuiltIns: "usage" ——由于polyfill包很臃肿，Babel 的此设置将检查你的所有代码，以查找目标环境中缺少的功能，并仅包含所需的 polyfill。

5.开始使用！！ 创建src文件夹，再在里面创建index.js文件，并输入

(x => x * 2)(1)

并在bash里继续输出入

$ npx babel src -d dist
//npx如果不懂请自行上网搜寻

如果觉得每次都要输入 npx babel src -d dist 太长，也可以改写package.json文件，

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build:auto":"npx babel src -d dist"},

之后只需要在bash中输入

$ npm run build:auto

结果如下，顺利编译成功了

"use strict";(function (x) {return x * 2;
})(1);

6.配置的其他方法

以上方法是用了babel.config.js来配置Babel

即

`babel.config.js`

babel.config.js在项目的根目录中创建一个使用以下内容调用的文件。

module.exports = function (api) {api.cache(true);const presets = [ ... ];const plugins = [ ... ];return {presets,plugins};
}

查看babel.config.js文档以查看更多配置选项。

官网还有几种方法来配置

`I. .babelrc`

{"presets": [...],"plugins": [...]
}

.babelrc在项目中创建一个使用以下内容调用的文件。

II. package.json

或者，您可以选择使用密钥.babelrc从内部指定配置，如下所示：package.json babel

{"name": "my-package","version": "1.0.0","babel": {"presets": [ ... ],"plugins": [ ... ],}
}

`III. .babelrc.js`

配置.babelrc与之相同，但您可以使用JavaScript编写它。

const presets = [ ... ];
const plugins = [ ... ];module.exports = { presets, plugins };

你可以访问任何Node.js API，例如基于流程环境的动态配置：

const presets = [ ... ];
const plugins = [ ... ];if (process.env["ENV"] === "prod") {plugins.push(...);
}module.exports = { presets, plugins };

IV. 使用CLI（@babel/cli）

这里如果你明确知道自己需要的插件，如箭头函数，那么可以在bash先下载

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

然后接着输入

babel --plugins @babel/plugin-transform-arrow-functions src -d dist

即可

V. 使用API（`@babel/core`）

require("@babel/core").transform("code", {plugins: ["@babel/plugin-transform-arrow-functions"]
});

好的，大概就是这样啦，如果有任何问题可以在评论区指出，谢谢大家！