JS语法转换-ES6转ES5

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

　还有一个链接介绍es5的功能的

　参考链接

巴特西

JS语法转换-ES6转ES5

最新文章

热门文章