ES6環境的搭建步驟

• 步驟一：在自己電腦裏面選擇一個盤新建一個文件夾，例如es6use文件夾
  
• 步驟二：在es6use文件夾下建立一個src文件夾、一個dist文件夾、一個index.html文件（其中src文件夾用來存放自己用es6語法寫的js文件；dist文件夾用來存放es6轉換爲es5語法的js文件）
  
  其中的node_modules是我最後安裝babel轉換包的時候生成的，演示的時候忘記刪除了，你在目錄下最後也會生出這個文件
• 步驟三：在src文件夾下面建立一個index.js文件，並在該文件下面寫入下面內容用來測試；再在index.html文件裏面引入該文件：< script src="./dist">< /script>,因爲最後要用的是轉換爲es5的js文件
  
• 步驟四：對項目進行初始化，在控制檯切換到es6use目錄下，輸入"npm init -y"即生成一個package.json文件，打開文件內容如下
  
  
• 步驟五：開始環境的搭建。先輸入”npm install babel-cli -g"對bebal進行全局安裝，如果網速較慢，可以使用cnpm；接着再輸入"npm install --save-dev babel-preset-es2015 babel-cli“，將babel-preset-es2015和babel-cli進行本地安裝，安裝成功後就會package.json文件中有記錄,多了devDependencies這一項
  
• 步驟六：在es6use目錄下新建一個 .babelrc文件，在文件中輸入：
  
• 步驟七：在控制檯輸入"babel src/index.js -o dist/index.js"，-o表示輸出，即將src下的文件index.js通過babel轉換器轉換後輸出到dist文件夾下的index.js文件。會發現dist文件夾下自動生成了index.js文件，內容是轉換過來的es5語法，如下
  
  這就說明環境搭建成功了，自己可以多進行幾次測試，即在src文件下建立js文件用es6語法寫入，在終端或cmd中輸入命令babel src/index.js -o dist/index.js，再在dist文件下來看下語法是否轉換過來，最後在index.html中引入dist裏的js文件來使用
• 如果想使用簡單一點的轉換命令可以通過在package.json文件中的scripts屬性進行更改：如下
  
  再在控制檯輸入npm run build可以得到相同效果