简介

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

1
2
3

# 解决了以下问题
-- ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行
-- 通过Babel可以在不担心现有环境是否支持的情况下，使用ES6编写程序

安装

1
2
3
4
5

# 安装命令行转码工具
npm install -g babel-cli

# 查看是否安装成功(版本号)
babel --version

使用

1. 创建babel文件夹

2. 初始化项目

   1	npm init -y

3. 创建文件src/example.js，下面是一段ES6代码：

   1 2 3 4 5 6

   // 转码前 // 定义数据 let input = [1,2,3] // 将数组的每个元素 +1 input = input.map(item => item + 1) console.log(input)

4. 配置.baberlrc

   Babel的配置文件是.baberlrc,存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下：

   1 2 3 4

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

   presets字段设定转码规则，将es2015规则加入.barberlrc:

   1 2 3 4

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

5. 安装转码器，在项目中安装

   1	npm install --save-dev babel-preset-es2015

6. 转码

   1	babel src -d dist

   注： 运行错误的话，可以将vscode转为以管理员身份运行

自定义脚本

1. 改写package.json

   1 2 3 4 5

   { "scripts":{ "build": "babel src\\example.js -o dist\\compiled.js" } }

2. 转码的时候，执行下面的命令

   1 2	mkdir dist npm run build