es6的搭建

2018-05-11  本文已影响0人  默色留恋

首先建立根文件夹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保存代码就可以了。

(感谢胖大神的文章指导)

喜欢的话就留下你的小心心吧。

上一篇下一篇

猜你喜欢

热点阅读