首先建立根文件夹sunnyes6(这个根据个人喜欢),在此文件夹中创建dist与src两个文件夹和一个index.html,在src文件夹中建立index.js
在cmd面板中输入
cd sunnyes6
npm init -y
-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
可以根据自己的需要对package.json进行修改
cnpm install babel-cli -g
cnpm install --save-dev babel-preset-es2015 babel-cli
babel src/index.js -o dist/index.js
根目录下新建.babelrc文件并输入
{
"presets":[
"es2015"
],
"plugins":[]
}
在index.html中引入
<script type="text/javascript" src="./dist/index.js"></script>
必须是引用dist文件夹中的。
到这就结束了,但是每次修改都得输入babel src/index.js -o dist/index.js这句长的命令,感觉有点麻烦,可以在package.json修改
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
然后在cmd命令板中输入npm run build,你会发现在dist文件夹中生成一个index.js文件。
其实这个我感觉也挺麻烦,因为每次修改还是得输入npm run build,这里有个比较方便的,而且还不用常输入
在cmd命令板中输入cnpm install live-server -g ,之后每次修改只要ctrl+s保存代码就可以了。
(感谢胖大神的文章指导)
喜欢的话就留下你的小心心吧。
网友评论