Babel

Babel

Babel是一个广泛使用的转码器

可以将ES6代码转为ES5代码

从而在现有环境执行执行。

因为ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

使用

1. 创建babel文件夹

2. 初始化项目

   npm init -y
   

3. 创建文件夹src，再在文件夹中创建example.js写代码（这样可以文件夹里的js一起转换）

4. 配置 .babelrc

   Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件。presets字段设定转码规则，将es2015规则加入 .babelrc

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

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

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

6. 转码

   # npm install --save-dev csv-loader xml-loader
   # 转码结果写入一个文件
   mkdir dist1
   
   # --out-file 或 -o 参数指定输出文件
   babel src/example.js --out-file dist1/compiled.js
   # 或者
   babel src/example.js -o dist1/compiled.js
   
   # 整个目录转码
   mkdir dist2
   
   # --out-dir 或 -d 参数指定输出目录
   babel src --out-dir dist2
   # 或者
   babel src -d dist2
   

终端执行：

PS D:\xx\1.前端\Babel> node src/example
communovere
长沙
[ 2, 3, 4 ]
PS D:\xx\1.前端\Babel> npm install --save-dev babel-preset-es2015

PS D:\xx\1.前端\Babel> babel src -d dist
src\example.js -> dist\example.js

PS D:\xx\1.前端\Babel>

总结

1. babel文件夹下src文件夹，src中写一些js文件

2. 新建 .babelrc文件，写：

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

3. npm install --save-dev babel-preset-es2015

4. babel src -d dist（将src中es6全部编译为es5到dist文件夹中）

简化

在packge.json里面多加一行代码"名字"：“babel src -d dist”

npm run dev

(同样可以转换)