0717-7821348
欢乐彩直播网站

欢乐彩直播网站

您现在的位置: 首页 > 欢乐彩直播网站
欢乐彩慕斯直播-ES6之Babel转化
2019-05-24 22:32:53

es6 babel

运用Babel转化ES6语法

Babel是一个广泛运用的转码器,能够将ES6代码转为ES5代码,从而在现有环境履行

// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});

babel

装置babel

npm install --save-dev babel

装备文件.babelrc

Babel的装备文件是.babelrc,存放在项目的根目录下。运用Babel的第一步欢乐彩慕斯直播-ES6之Babel转化,便是装备这个文件。

该文件用来设置转码规矩和插件,根本格局如下。

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

可是在windows体系中,不允许直接右键树立没有文件名的文件,能够经过cmd指令行创立:在当时文件夹翻开cmd并键入指令

type nul>.babelrc

presets字段设定转码规矩,官方供给以下的规矩集,你能够根据需求装置。

# 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 instal欢乐彩慕斯直播-ES6之Babel转化l --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后,将这些规矩参加.babelrc。

 {
"presets": [
"es2015",//三个中选一个,假如写了三个可是环境只要一个,会报错
"react",
"stage-2"
],
"plugins": []
}

指令行转码babel-cli

npm install -g babel-cli

根本用法如下。

# 转码成果输出到规范输出
$ babel example.毛肚是什么js
# 转码成果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或许
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或许
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s

上面代码是在大局环境下,进行Babel转码。这意味着,假如项目要运转,大局环境必须有Babel,也便是说项目产生欢乐彩慕斯直播-ES6之Babel转化了对环境的依靠。另一方面,这样做也无法支撑不同项目运用不同版别的Babel。

一个解决办法是将babel-cli装置在项目之中。

$ npm install --save-dev babel-cli

然后,改写package.json。

{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"//当时babel-cli的版别
},
"scripts": {
"build": "babel src -d lib"//src为需求转化的js目录,-d是指定转化之后的文件目录
},
}

转码的时分,就履行下面的指令。

$ npm run build

es6兼容性