babel练习：将es6+语法转换为浏览器兼容的语法

1.创建babel-demo文件夹

2.cmd命令行初始化此项目

命令行键入：npm init

3.创建src.js文件作为源文件，内写ES6语法的代码

src.js

var x = 2 ** 3;
x **= 3;
console.log(x);

4.安装babel插件

命令：npm install --save-dev @babel/plugin-transform-exponentiation-operator

 

 5.在package.json中新增命令babel-build

"babel-build": "babel --plugins @babel/plugin-transform-exponentiation-operator src.js --out-file dist.js"

 

 

6.运行转译命令：npm run babel-build

 

7.源文件中包含多个ES6特性时，需要安装多个插件

修改src.js文件，写入包含多个ES6特性的代码

src.js如下：

var x = 2 ** 3;

x **= 3;

console.log(x);

const array01 = [1,2,3,4,5]

const array02 = array01.map(v => v ** 2);

console.log(array02)

新建`babel.config.json`配置文件，将用到的插件写入此配置文件

babel.config.json文件如下：

{
  "plugins": [
    "@babel/plugin-transform-exponentiation-operator",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-block-scoping"
  ]
}

 

 修改`package.json`里`的`babel-build`命令

 

8.运行转译命令：npm run babel-build

 

 9.babel预设（babel官方编写的可以应对多数情况下的转译的预设）

• 改写babel.config.json配置

// {

//     "plugins": [

//       "@babel/plugin-transform-exponentiation-operator",

//       "@babel/plugin-transform-arrow-functions",

//       "@babel/plugin-transform-block-scoping"

//     ]

// }

 

{

  "presets": ["@babel/preset-env"]

}

• 安装预设：npm install -D @babel/preset-env
• 运行转译命令：npm run build

 运行结果：

 

10.watch监控(自动监控源文件的改动并自动执行转译命令)

 修改package.json文件

"babel-watch": "babel src.js --watch --out-file dist.js"

 运行转译命令：npm run babel-watch

END​​​​​​​