现在有很过编译的工具,比如是babel编译,webpack,grunt,gulp。
这篇文字很简单,就是让我们使用es6语法的代码,不仅仅可以让谷歌浏览器看,还可以使用ie8以上的浏览器看,其实就是把我们的代码,把es6语法转化为es5语法。
下面我们以使用babel为例。
1.我们新建一个文件夹,名字就叫babel好啦。
然后在这个文件夹里,进入cmd,使用npm init。创建一个package.json(配置信息)。一路回车即可。
package.json里面的内容是
{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2.全局安装babel。
npm install --g babel-cli
3.创建一个src(叫啥都可以)文件夹。里面有个1.js。写点es66代码。
- 添加build命令行。
在scripts里面可以刚一些,我们自己写的命令行。这里我们添加一条命令。"build": "babel src -d lib",意思就是当我们npm run build 即就是npm run babel src -d lib。babel src -d lib,就是babel(编译) src(送住文件夹的src里),-d(目标),lib(到文件夹的lib里)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
5.安装开发依赖
在package.json里添加
"devDependencies": {
"babel-cli": "^6.0.0"
},
然后在npm i。
6.现在你可以在cmd里运行npm run build。可以看到。babel文件夹里自动生成了一个lib文件夹。里面也对应生成了一个1.js。这就是“babel src -d lib”。但是这个1.js和src里面的1.js一抹一样,没有进行编译,这是为啥?
7.在babel文件夹没新建.babelrc文件。里面的内容是:
{
"presets": ["env"]
}
可以理解为presets环境变量的意思。env模式。
8.安装babel-preset-env到开发依赖。
"devDependencies": {
"babel-preset-env": "^1.7.0",
"babel-cli": "^6.0.0"
},
然后在npm i
9.然后在npm run build。就可以看到lib里面的文件被编译了。
当然了 src里面可以有多个js。那么lib也就是对应编译出多个js了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。