入门教程Babel es6转es5运用到项目中(本地版)
作者没有给服务器安装node Babel的权限,所以做了个变通的方案。
新的浏览器的基本都支持es6了,而项目总是要考虑兼容老的设配,在这种现状下使得我们项目中不能直接使用es6进行开发。这遍教程将通过Babel来把实际项目中的es6编译成es5。
初始化项目
// 生成package.json文件
npm init
安装命令行转码babel-cli
npm install --global babel-cli
安装es6转码规则
# es6转码规则
$ npm install --save-dev babel-preset-es2015
一、创建配置.babelrc文件
// 把转码规则添加到配置中
{
"presets": ["es2015"],//预设(presets)的作用是为babel安装指定的插件
"plugins": []
}
presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
一、package.json中配置输入输出路径
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
//"test": "echo \"Error: no test specified\" && exit 1",
"buid": "babel web/main -d web/lib"
},
}
一、把web/main目录中的JS编译到web/lib
npm run build