react+webpack+babel+eslint+redux+react-router+sass 環境快速搭建

時間 2019-11-15

標籤 react+webpack+babel+eslint+redux+react react webpack babel eslint redux router+sass router sass 環境快速搭建欄目 React 简体版

原文原文鏈接

本文中的例子支持webpack-dev-server自動刷新及react熱替換，使用了redux管理state，用react-router切換路由，用babel實現ES6語法書寫，同時支持async/await書寫，eslint代碼檢測，及sass的使用css

1.搭建前文檔結構：html

assets 用來存放css 及圖片等資源node

components存放組件react

js 用來存放js文件jquery

頁面主文件是 index.htmlwebpack

不用糾結文件夾結構，只要不涉及團隊合做，這玩意兒就像本身的女人，想咋睡咋睡，想咋組織就咋組織大體如此git

2.webpack配置文件的書寫es6

var webpack=require('webpack');
var path=require('path');
var DashboardPlugin = require('webpack-dashboard/plugin');//一款很屌的插件，用了你就知道了
module.exports={
    entry:{ //多文件入口以及配置dev server及熱替換
        app:[path.resolve(__dirname, './js/index.js'),'webpack/hot/dev-server.js','webpack-dev-server/client?http://0.0.0.0:8080'],
        vendor:['react']
    },
    output:{ //多文件輸出 注意[name]這種寫法
        publicPath:'/build',
        filename:'[name].js'
    },
    module:{
        loaders:[  //最新loader的寫法
            {test:/\.js?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test:/\.jsx?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test: /\.(jpg|png|gif)$/, loader: "url?limit=8192",exclude: /node_modules/},
            {test:/\.(scss|css)?$/,loader:'style!css!sass',exclude: /node_modules/}
        ]
    },
    resolve:{  //配置node_modules的地址、文件名省略及文件路徑簡寫
        root:'/Users/****/mywork/rwp/node_modules',
        extensions:['','.js','.jsx','.json','.scss'],
        alias:{
            listCss:path.join(__dirname,'./assets/css/list'),
            publicCss:path.join(__dirname,'./assets/css/public'),
            bkCss:path.join(__dirname,'./assets/css/bk'),
            coverCss:path.join(__dirname,'./assets/css/cover'),
            listCp:path.join(__dirname,'./components/list'),
            bkCp:path.join(__dirname,'./components/bk'),
            cbCp:path.join(__dirname,'./components/cb'),
            publicCp:path.join(__dirname,'./components/public'),
            coverCp:path.join(__dirname,'./components/cover')
        }
    },
    eslint:{//eslint配置文件
        configFile:"./.eslintrc.js"
    },
    plugins:[
        new webpack.NoErrorsPlugin(), //防錯誤打斷程序插件
        new DashboardPlugin(),
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
    ]
}

以上是webpack.config.js,用於生產環境的配置文件，下面這個是一個比較粗糙的生產環境配置文件，待優化github

var webpack=require('webpack');
var path=require('path');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//代碼壓縮插件
var CopyWebpackPlugin = require('copy-webpack-plugin');//文件拷貝插件
module.exports={
    entry:{
        "./build/app":path.resolve(__dirname, './js/index.js'),
        "./build/vendor":['react']
    },
    output:{
        publicPath:'/',
        path:path.resolve(__dirname,'../../package'),
        filename:'[name].js'
    },
    module:{
        loaders:[
            {test:/\.js?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test:/\.jsx?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test: /\.(jpg|png|gif)$/, loader: "url?limit=8192",exclude: /node_modules/},
            {test:/\.(scss|css)?$/,loader:'style!css!sass',exclude: /node_modules/}
        ]
    },
    resolve:{
        root:'/Users/****/mywork/rwp/node_modules',
        extensions:['','.js','.jsx','.json','.scss'],
        alias:{
            listCss:path.join(__dirname,'./assets/css/list'),
            publicCss:path.join(__dirname,'./assets/css/public'),
            bkCss:path.join(__dirname,'./assets/css/bk'),
            coverCss:path.join(__dirname,'./assets/css/cover'),
            listCp:path.join(__dirname,'./components/list'),
            bkCp:path.join(__dirname,'./components/bk'),
            cbCp:path.join(__dirname,'./components/cb'),
            publicCp:path.join(__dirname,'./components/public'),
            coverCp:path.join(__dirname,'./components/cover')
        }
    },
    plugins:[
        new webpack.optimize.DedupePlugin(),//文件內容深度去重
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new CopyWebpackPlugin([
            { from: 'index.html', to: 'index.html' }
        ])
    ]
}

關於配置文件的詳細敘述及各字段意思請你們查看官網：web

https://webpack.github.io/docs/configuration.html#module-loaders

下面是package.json

{
  "name": "rwp",
  "version": "1.0.0",
  "description": "this is a test project",
  "main": "server.js",
  "scripts": {
    "build": "webpack --progress --profile --colors --config webpack.production.config.js",
    "start": "webpack-dashboard -- webpack-dev-server --hot --progress --colors"
  },
  "keywords": [
    "test"
  ],
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "author": "jhone lee",
  "license": "ISC",
  "dependencies": {
    "babel-runtime": "^6.11.6",
    "body-parser": "1.15.x",
    "copy-webpack-plugin": "^3.0.1",
    "express": "4.x",
    "jquery": ">=2.x",
    "react": ">=15.2.x",
    "react-redux": "^4.4.5",
    "react-router": "2.6.x",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel": "6.x",
    "babel-core": "6.x",
    "babel-eslint": "^6.1.2",
    "babel-loader": "*",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "*",
    "eslint": "^3.3.1",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^5.2.2",
    "file-loader": "^0.9.0",
    "jsx-loader": "^0.13.2",
    "node-sass": "^3.8.0",
    "react-dom": "^15.2.1",
    "redux": "^3.5.2",
    "redux-devtools": "^3.3.1",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "1.13.1",
    "webpack-dashboard": "^0.1.7",
    "webpack-dev-server": "1.4.x"
  }
}

這裏須要注意的script裏面須要執行的命令：

npm run build 會運行生產環境的config文件

npm start 會運行開發環境的config文件

後面至於 redux及react-router怎麼用，以及.babelrc 和 .eslintrc怎麼配置不在本文的討論範疇

僅粘出個人兩個rc文件

module.exports = {
    "parser":"babel-eslint",
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "warn",
            4
        ],
        "linebreak-style": [
            "warn",
            "unix"
        ],
        "quotes": [
            "warn",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-unused-vars":[
             "warn", 
             { 
                "vars": "all", 
                "args": "after-used" 
             }
        ],
        "no-console":[
            "error",{
                "allow":["log","error","warn"]
        }],
        "no-constant-condition":[
            "warn",{
                "checkLoops":false
            }
        ],
        "no-fallthrough":["warn",{
            "commentPattern": "break[\\s\\w]*omitted"
        }]
    }
};

以上爲 .eslintrc

{
 "presets": [ "es2015", "stage-0","react"],
 "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

以上爲 .babelrc

至於react-router及redux怎麼用，之後有時間再說