目录
一、准备工作:
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]))