1.使用Babel转码
全局安装
npm install -g babel-cli
布局安装
npm install -g babel-cli --save-dev
Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,需要配置这个文件。
{ "presets": [], "plugins": [] }
点击此处到Babel中文官网presets配置页面:Babel Plugins
# ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
根据自己需要 将配置文件修改
{ "presets": [ "es2015" ], "plugins": [] }
然后在命令行开始转es5
# 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel a.js --out-file b.js # 或者 缩写 $ babel a.js -o b.js
# 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s
2.gulp
安装gulp
npm install gulp --save-dev
安装gulp的转码工具 babel
npm install --save-dev gulp-babel
安装完成后 会发现package.json中
{ "devDependencies": { "babel-cli": "^6.22.2", "gulp": "^3.9.1", "gulp-babel": "^6.1.2" } }
编写gulpfile.js文件,设置任务 转码
var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("src/a.js") .pipe(babel()) .pipe(gulp.dest("lib")); });
在命令行输入,src文件夹中的a.js已经被转码成ES5标准的a.js。(在了lib文件夹)
gulp