大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
Babel介绍
Babel是一个 ES6 转码器，能将 ES6 代码转为 ES5 代码，这样原本不支持ES6的老版本浏览器执行ES6代码
// 转码前：使用了ES6箭头函数
items.map(item => item + 1);
// 转码后：转为了普通函数
items.map(function (item) {
return item + 1;
});Babel安装
安装 Babel，一个命令就够了：
$ npm install --save-dev @babel/coreBabel使用
注意！！！ Babel 工具和模块的使用，都必须先写好Babel的配置文件 .babelrc
// 初始状态下的.babelrc文件内容
{
"presets": [],
"plugins": []
}其中 presets 主要用于设定转码规则，官方提供了规则集，可按自己的需要去安装相应的规则集，也可以说是预设
# 最新转码规则
$ npm install --save-dev @babel/preset-env
# react 转码规则
$ npm install --save-dev @babel/preset-react安装好后，就把安装的规则集填入上面说的presets字段里
// 填入了规则集的.babelrc文件内容
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}写好.babelrc文件后呢，那就可以开始使用咯
babel提供了几种使用方式去转码，这里一一介绍
1. 使用babel命令行转码
Babel 提供命令行工具@babel/cli，用于命令行转码。
如果你要使用命令进行转码的话，当然是先安装这个工具，安装命令：
$ npm install --save-dev @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 -s2. 使用babel-node命令得到REPL 环境转码
@babel/node模块的babel-node命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，能直接运行 ES6 代码。
如果你要在该环境中进行转码的话，当然是先安装上@babel/node模块，模块安装命令：
$ npm install --save-dev @babel/node安装好后，输入babel-node命令，就能进入这个环境了
$ npx babel-node另外babel-node命令直接运行 ES6 脚本
// es6.js 文件
(x => x * 2)(1)这里可以使用babel-node命令运行es6.js这个文件，可以得到以下结果
$ npx babel-node es6.js
23. 使用require命令只对某些类型文件转码
@babel/register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。
同样先安装该模块：
$ npm install --save-dev @babel/register使用时，必须首先加载@babel/register。
// index.js
require('@babel/register');
require('./es6.js');
// es6.js 文件
(x => x * 2)(1)然后，就不需要手动对index.js转码了。
$ node index.js
2需要注意的是，@babel/register只会对require命令加载的文件转码，不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
4. 提供对默认不转码的方法进行转码
由于Babel 默认只转换新的 JavaScript 句法（syntax），不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会对它们进行转码。
也就是说比如像ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。
那么想让这个方法运行，就可以使用core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片。
同样需要先安装
$ npm install --save-dev core-js regenerator-runtime然后，在脚本头部，加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');5. 在浏览器环境转码
使用@babel/standalone模块提供的浏览器版本，将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>注意：网页实时将 ES6 代码转为 ES5，对性能会有影响。因为生产环境需要加载已经转码完成的脚本。
另：Babel 提供一个REPL 在线编译器，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。
总结：就是先安装babel，然后配置好.babelrc文件，再根据场景选择一种或者多种方式，安装相应的模块或者工具进行使用。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/190036.html原文链接：https://javaforall.net
