如何搭建es6開發環境

node.js安裝

1. 此過程沒有難點，略過
2. 下載完成後能夠經過node -v和npm -v來查看是否安裝成功以及版本後

webpack 安裝

1. 新建一個目錄(項目名稱), 進入該項目，npm init, 而後一路回車便可。(會生成一個package.json文件)
2. 在根目錄下建立src目錄，並在src目錄下建立index.js文件
3. 在項目的根目錄下執行 npm install webpack webpack-cli --save-dev
4. npm install webpack-dev-server html-webpack-plugin --save-dev

   webpack-dev-server是啓動一個本地的服務，html-webpack-plugin是一個插件，用來使用html的模板

5. 在根目錄下建立webpack.dev.config.js文件

6. 編輯package.json文件：

   "scripts": {

   "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

   }

安裝babel相關插件

1. npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

2. 在項目的根目錄下建立.babelrc

   {

   "presets": ["es2015", "latest"],
   "plugins": []

   }

修改webpack.dev.config.js 並運行

1. 在webpack.dev.config.js種添加內容

   const path = require("path");
   const HtmlWebpackPlugin = require("html-webpack-plugin");
   module.exports = {
       entry: './src/index.js',// 入口文件
       output: {
           path: __dirname,
           filename: './release/bundle.js'
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './index.html'
           })
       ],
       devServer: {
          contentBase: path.join(__dirname,'./release'), //運行的目錄
          open: true, // 自動刷新瀏覽器
          port: 9002 // 端口號
       }
   }

2. 如今就能夠在src下的index.js中寫es6代碼啦
3. 運行npm run dev; 能夠看到會自動訪問 localhost:9002