React+Webpack+Eslint+Babel構建React腳手架

React+webpack+Eslint+Babel構建React腳手架

參考網上文章，說的不是很全，想本身寫一篇來鞏固知識點，腳手架源碼參考阮一峯老師的Github

所用技術棧

• React

• Babel

• Webpack

• Eslint

• travis

• ES6

構建過程

安裝nodejs

初始化項目：

npm init -y        注：-y的意思是默認安裝

目錄構建

配置package.json

npm初始化後會自動生成

添加：

"dependencies": {
    "babel-runtime": "6.x",
    "react": "15.x",
    "react-dom": "15.x"
  },
  "devDependencies": {
    "babel-core": "6.x",
    "babel-eslint": "7.x",
    "babel-loader": "6.x",
    "babel-plugin-transform-runtime": "6.x",
    "babel-preset-es2015": "6.x",
    "babel-preset-react": "6.x",
    "babel-preset-stage-0": "6.x",
    "copy-webpack-plugin": "latest",
    "css-loader": "~0.26.1",
    "eslint": "latest",
    "eslint-config-airbnb": "latest",
    "eslint-formatter-pretty": "^1.1.0",
    "eslint-plugin-compat": "^1.0.0",
    "eslint-plugin-import": "latest",
    "eslint-plugin-jsx-a11y": "3.x",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-react": "latest",
    "open-browser-webpack-plugin": "0.0.3",
    "style-loader": "~0.13.1",
    "webpack": "1.x",
    "webpack-dev-server": "1.x"
  }

或者在命令行中使用安裝命令，加深印象。注：-S是安裝在生產環境，-D安裝在開發環境。

//安裝react
npm install react -S
npm install react-dom -S

//減小打包的時候重複代碼
npm install babel-runtime  -S
npm install babel-plugin-transform-runtime -D

//安裝babel相關
npm install babel-loader -D //安裝babel-loader
npm install babel-core -D //安裝babel核心
npm install babel-preset-es2015 -D //支持ES2015
npm install babel-preset-react -D  //支持jsx
npm install babel-preset-stage-0 -D //支持ES7
npm install babel-eslint -D 

//安裝webpack
npm install webpack -D //模塊管理和打包工具
npm install webpack-dev-server -D //監聽代碼自動刷新

//安裝Eslint相關
npm install eslint -D
npm install eslint-config-airbnb -D
npm install eslint-formatter-pretty -D
npm install eslint-plugin-compat -D
npm install eslint-plugin-import -D
npm install eslint-plugin-jsx-a11y -D
npm install eslint-plugin-promise -D
npm install eslint-plugin-react -D

配置webpack.config.js

Webpack將項目中的全部靜態資源都當作模塊，模塊之間能夠互相依賴，由webpack對它們進行統一的管理和打包發佈。

安裝webpack後，手動建立文件進行定製。

webpack.production.config.js與之相似。

const webpack = require('webpack');
const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    contentBase: './app',
    port: 8080
  },
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve(__dirname, 'app/main.jsx')
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, include: path.resolve(__dirname, 'app'), loader: 'style-loader!css-loader' },
      { test: /\.js[x]?$/, include: path.resolve(__dirname, 'app'), exclude: /node_modules/, loader: 'babel-loader' }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ]
};

配置.babelrc

babel是ES2015 語法轉化器，可從Babel學習其用法。

安裝babel後，手動建立進行配置。

{
  "presets": [ "es2015", "stage-0", "react"],
  "env": {
    "build": {
      "optional": ["optimisation", "minification"]
    }
  }
}

配置.eslintrc

ESLint是一個QA工具，用來避免低級錯誤和統一代碼的風格。

安裝eslint後，手動建立進行配置。

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
     }
  },
  "globals": {
    "window": true,
    "document": true
  },
  "rules": {
    "arrow-parens": 0,
    "class-methods-use-this": 0,
    "compat/compat": 2,
    "comma-dangle": 0,
    "consistent-return": 2,
    "func-names": 2,
    "generator-star-spacing": [0],
    "import/no-extraneous-dependencies": ["off"],
    "import/extensions": 0,
    "import/no-unresolved": 2,
    "new-cap": 0,
    "no-implicit-coercion": "error",
    "no-mixed-operators": 0,
    "no-plusplus": 0,
    "no-use-before-define": 0,
    "no-nested-ternary": 0,
    "no-underscore-dangle": 0,
    "no-var": "error",
    "semi": ["error", "always"],
    "promise/param-names": 2,
    "promise/always-return": 2,
    "promise/catch-or-return": 2,
    "promise/no-native": 0
  },
  "plugins": [
    "compat",
    "import",
    "promise"
  ]
}

配置.travis.yml

Travis Ci是一個基於雲的持續集成項目，目前已經支持大部分主流語言了，如：C、PHP、Ruby、Python、Nodejs、Java、Objective-C等等，Travis Ci與Github集成很是緊密，官方的集成測試託管只支持Github項目，不過你也能夠經過Travis Ci開源項目搭建一套屬於本身的方案。

可從Travis註冊使用，很方便。

sudo: false

language: node_js
node_js:
  - "node"

最後貼上本身的Github，前端小白，歡迎指導。