安裝配置Babel

• babel-preset-es2015 ES6語法包，使程式碼可以隨意地使用ES6的新特性。
• babel-preset-react React語法包，專門用於React的優化，在程式碼中可以使用React ES6 classes的寫法，同時直接支援JSX語法格式

1. 安裝Babel loader

// 安裝babel-core核心模組和babel-loader
npm install babel-core babel-loader --save-dev


// 安裝ES6 和 React 支援
npm install babel-preset-es2015 babel-preset-react --save-dev
 

1. 配置 .babelrc

安裝完Babel和它的外掛，配置一下它的規則，在根目錄下新建一個.babelrc空檔案：

// 告訴Babel，編譯JavaScript程式碼的時候要用這兩個presets編譯
 {
   "preset": ["es2015", "react”]
 }

安裝配置ESLint

1. 安裝ESLint loader

為webpack新增這個preLoaders（在loader處理資源之前，先用preLoaders進行處理，程式碼檢查在程式碼轉換之前進行）

npm install eslint eslint-loader --save-dev
 

這裡使用Airbnb開發配置合集eslint-config-airbnb，這個配置合集裡面還包括以下3個外掛：

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

npm install eslint-config-eslint

1. 配置 .eslintrc

在根目錄下新建一個.eslintrc的空檔案：

{
   "extends": "airbnb",
   "rules": {
     "comma-dangle": ["error", "never"]
   }
 }

 

安裝配置webpack

配置webpack之前，先安裝一個webpack的外掛——html-webpack-plugin，它可以幫助我們自動生成HTML頁面，並且引入正確的JavaScript檔案依賴：

npm install html-webpack-plugin —save-dev

在項根目錄下新建一個webpack.config.js檔案:

let path = require('path') 
let webpack = require('webpack')
let HtmlwebpackPlugin = require('html-webpack-plugin')
// 一些常用路徑
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, 'app')
const BUILD_PATH = path.resolve(ROOT_PATH, 'build')

module.exports = {
  entry: {
    app: path.resolve(APP_PATH, 'index.jsx')
  },
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  // 開啟 dev source map
  devtool: 'eval-source-map',
  // 開啟 webpack dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },

  modules: {
    // 配置preLoaders, 將eslint 新增進去
    preLoaders: [
      {
        test: /\.jsx?$/,
        loaders: ['eslint'],
        include: APP_PATH
      }
    ],
    
    // 配置loader，將Babel新增進去
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['babel'],
        include: APP_PATH
      }
    ]
  },

  // 配置 plugin
  plugins: [
    new HtmlwebpackPlugin({
      title: 'my first react webpack'
    })
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
    // 在js中import載入jsx副檔名的指令碼
  }
}

新增元件熱載入（HMR）功能

npm install babel-preset-react-hrme --save-dev

這個preset裡面其實包括兩方面：

• react-transform-hmr用來實現熱載入
• react-transform-catch-errors用來捕獲render裡面的方法，並且直接展示在介面上

配置一下 .babelrc：

{
  "preset": ["es2015", "react"],
  "env": {
    "development": {
      "presets": ["react-hrme"]
    }
  }
}

來源：https://segmentfault.com/a/1190000011040484