es6总结(一) ——开发环境

我们使用Babel把ES6编译成ES5

安装方法：

　　　　a.先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

 

      • src：书写ES6代码的文件夹，写的js程序都放在这里。
      • dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件

　　　　  b.写一个index.html

　　　　c.在src写一个index.js

　　　　d.安装命令：

      1.  1 npm init -y 
      2. 全局安装 npm install -g babel-cli 
      3. 本地安装babel-preset-es2015 和 babel-cli　 npm install --save-dev babel-preset-es2015 babel-cli 
      4. 在根目录下新建.babelrc文件，并打开写入代码　　 
        1 {
2     "presets":[
3         "es2015"
4     ],
5     "plugins":[]
6 }

         

      5. 简化转换的命令（此时转换命令为babel src/index.js -o dist/index.js）　　　　　　　　　

　　　　　　　　　打开package.json文件，把文件修改成下面的样子。　　　　　　　

 1 {
 2   "name": "es6",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "build": "babel src/index.js -o dist/index.js"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC",
12   "devDependencies": {
13     "babel-cli": "^6.24.1",
14     "babel-preset-es2015": "^6.24.1"
15   }
16 }

　　　　　　　　　　此时，命令为  npm run build 

 

posted @ 2018-02-28 18:34  Paradise_追逐者  阅读(102)  评论(0)  编辑  收藏  举报