Babel 7 基础入门学习（详细版）
本文章来源于：https://blog.csdn.net/weixin_41046961/article/details/87908962
前言
之前一直想要系统的学习一下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"]
});
好的，大概就是这样啦，如果有任何问题可以在评论区指出，谢谢大家！
————————————————
版权声明：本文为CSDN博主「理智lili」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41046961/article/details/87908962