Babel
Babel是一个广泛使用的转码器
可以将ES6代码转为ES5代码
从而在现有环境执行执行。
因为ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。
使用
-
创建babel文件夹
-
初始化项目
npm init -y
-
创建文件夹src,再在文件夹中创建example.js写代码(这样可以文件夹里的js一起转换)
-
配置 .babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件。presets字段设定转码规则,将es2015规则加入 .babelrc
{ "presets": ["es2015"], "plugins": [] }
-
安装转码器,在项目中安装
npm install --save-dev babel-preset-es2015
-
转码
# 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>
总结
-
babel文件夹下src文件夹,src中写一些js文件
-
新建 .babelrc文件,写:
{ "presets": ["es2015"], "plugins": [] }
-
npm install --save-dev babel-preset-es2015
-
babel src -d dist
(将src中es6全部编译为es5到dist文件夹中)
简化
在packge.json里面多加一行代码"名字":“babel src -d dist”
npm run dev
(同样可以转换)