- A+
所属分类:Web前端
一、简介
1.ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
2.Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。
二、安装Babel
Babel提供babel-cli工具,用于命令行转码
安装:npm i -g babel-cli
检查安装:babel --version
三、Babel的使用
1)安装Node.js环境:https://nodejs.org/zh-cn/
2)进入项目,初始化项目:npm init -y
3)创建文件 src/example.js
4)安装转码器,在项目中安装:npm i --save-dev babel-preset-env 或 npm i --save-dev babel-preset-es2015
5)创建文件并配置:.babelrc {"presets":["env","es2015"],"plugins":[]}
注:Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件。
四、文件转化
- 文件:
babel src/index.js -o dist/index.js
注:-o(--out-file):输出的意思 - 文件夹:
babel src -d dist
注:-d(--out-dir):指定输入目录 - 实时监控:
babel src -w -d dist
注:-w:watch监控
五、自定义脚本
1)改写package.json
{ // ... "scripts":{ // ... "build": "babel src\index.js -o dist\index.js" }, }
2)转码时,执行下面命令
mkdir dist
npm run build