babel小知识记录

一、准备工作：

1、新建一个用于babel练习的项目，在项目中新建package.json文件：

 npm init -y

2、安装babel:

 npm install --save-dev @babel/core

3、安装babel转码规则：

npm install --save-dev @babel/preset-env   ->最新转码规则
npm install --save-dev @babel/preset-react -> react转码规则

4、babel配置文件配置 .babelrc文件：

{
    "presets": [ //转码规则
        "@babel/env",
        "@babel/preset-react"
    ],
    "plugins": []  //
}

二、利用babel-cli运行ES6代码

1、做完上面的准备工作（1，2，3，4）
2、安装命令行转码，来运行ES6代码：

npm install --save-dev @babel/cli

3、转码ES6的代码，例如运行babel项目中 src/index.js文件， 可以在Terminal上看到运行结果

npx babel src/index.js

4、如果想把babel转换后的代码输出到一个单独的文件，可以运行下面代码;

// 在src文件夹下生成和index.js同级的index-result.js文件
npx babel src/index.js --out-file src/index-result.js 

或者

//在babel项目夹下生成和.babelrc同级的index-result.js文件
npx babel src/index.js -o index-result.js

三、利用babel-node运行ES6代码

1、做完上面的准备工作（1，2，3，4）
2、除了使用@babel/cli，也可以安装@babel/node来运行ES代码：

 npm install --save-dev @babel/node

3、如果想在命令面板Terminal中运行ES6代码，那么安装完@babel/node后，再在命令面板输入 npx babel-node, 最后在命令面板输入ES6代码即可，例如

let arr = [111, 222, 333]
arr.map(i => console.log(i))

4、安装完@babel/node后，除了可以在命令面板中输入ES6代码，还可以使用@babel/node来运行写了ES6代码的文件，可以直接在命令面板中输出运行后的结果

npx babel-node src/index.js

四、安装@babel/register，自动对通过require进来的文件进行转码，注意不是通过reqiure进来的.js .jsx .es .es6文件是不会自动转码的

1、做完上面的准备工作（1，2，3，4）
2、安装@babel/register：

npm install --save-dev @babel/register

3、在require文件之前引入@babel/register，例如，如果在user.js文件中，想要对引进的role.js文件自动转码，应该这么做：

// user.js文件内容

require('@babel/register') //在require('./role.js')之前引入就可以对role.js自动转码，如果这行代码放在require('./role.js')后面，则不能实现自动转码
require('./role.js')

//注意：user.js中的代码不会自动转码，@babel/register只对require进来的文件代码进行转码
let arr = [1,2 3]
arr.map(i => console.log(i)))

4、@babel/register是实时转码的，所以只适合开发环境中使用

五、安装 regenerator-runtime 和 core-js 来转换新的ES的API

1、做完上面的准备工作（1，2，3，4）
2、babel默认只转换新的JavaScript句法（Syntax），不转换新的API，比如Object.assign 、 Array.form等
3、安装regenerator-runtime及core-js:

npm install --save-dev core-js regenerator-runtime

4、文件中引入：

// index.js文件内容

import ('core-js')
import('regenerator-runtime/runtime')

// 或者用下面注释的方式引入
// require('core-js')
// require('regenerator-runtime/runtime')

let arr = Array.from(new Set([1, 2, 3]))