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