// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
 return item + 1;
});

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

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

 {
  "presets": [
   "es2015",
   "react",
   "stage-2"
  ],
  "plugins": []
 }

$ npm install --global babel-cli

# 转码结果输出到标准输出
$ 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

# 安装
$ npm install --save-dev babel-cli

{
 // ...
 "devDependencies": {
  "babel-cli": "^6.0.0"
 },
 "scripts": {
  "build": "babel src -d lib"
 },
}

$ npm run build

$ babel-node
> (x => x * 2)(1)
2

$ babel-node es6.js
2

$ npm install --save-dev babel-cli

{
 "scripts": {
  "script-name": "babel-node script.js"
 }
}

$ npm install --save-dev babel-register

require("babel-register");
require("./index.js");

$ npm install babel-core --save

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 }

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
 .transform(es6Code, {
  presets: ['es2015']
 })
 .code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'

$ npm install --save babel-polyfill

import 'babel-polyfill';
// 或者
require('babel-polyfill');

$ npm install babel-core@old

<script src="/UploadFiles/2021-04-02/browser.js">

上面代码中，browser.js是Babel提供的转换器脚本，可以在浏览器运行。用户的ES6脚本放在script标签之中，但是要注明type="text/babel"。
另一种方法是使用babel-standalone模块提供的浏览器版本，将其插入网页。


<script src="/UploadFiles/2021-04-02/babel.min.js">

注意，网页中实时将ES6代码转为ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。
下面是如何将代码打包成浏览器可以使用的脚本，以Babel配合Browserify为例。首先，安装babelify模块。


$ npm install --save-dev babelify babel-preset-es2015


然后，再用命令行转换ES6脚本。


$ browserify script.js -o bundle.js  -t [ babelify --presets [ es2015 react ] ]


上面代码将ES6脚本script.js，转为bundle.js，浏览器直接加载后者就可以了。
在package.json设置下面的代码，就不用每次命令行都输入参数了。


{
 "browserify": {
  "transform": [["babelify", { "presets": ["es2015"] }]]
 }
}


八、在线转换


Babel提供一个REPL在线编译器，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行。
九、与其他工具的配合


许多工具需要Babel进行前置转码，这里举两个例子：ESLint和Mocha。
ESLint 用于静态检查代码的语法和风格，安装命令如下。


$ npm install --save-dev eslint babel-eslint



然后，在项目根目录下，新建一个配置文件.eslint，在其中加入parser字段。


{
 "parser": "babel-eslint",
 "rules": {
  ...
 }
}


再在package.json之中，加入相应的scripts脚本。


 {
  "name": "my-module",
  "scripts": {
   "lint": "eslint my-files.js"
  },
  "devDependencies": {
   "babel-eslint": "...",
   "eslint": "..."
  }
 }



Mocha 则是一个测试框架，如果需要执行使用ES6语法的测试脚本，可以修改package.json的scripts.test。


"scripts": {
 "test": "mocha --ui qunit --compilers js:babel-core/register"
}


上面命令中，--compilers参数指定脚本的转码器，规定后缀名为js的文件，都需要使用babel-core/register先转码。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。