webpack4+babel7+eslint+editorconfig+react-hot-loader 搭建react開發環境

react+webpack 搭建工程

具體工程能夠看個人github

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')

//判斷是不是開發環境
const isDev = process.env.NODE_ENV === 'development'

const config = {
    //入口
    entry: {
        app: path.join(__dirname, '../client/app.js')
    },
    //出口
    output: {
        filename: '[name].[hash].js', // 文件更改後從新打包，hash值變化，從而刷新緩存
        path: path.join(__dirname, '../dist'),
        //很重要
        publicPath: '/public/',
    },
    //解析
    resolve: {
        extensions: ['.js', '.jsx'], // 自動解析肯定的擴展
    },
    module: {
        rules: [
            {
                //前置(在執行編譯以前去執行eslint-loader檢查代碼規範，有報錯就不執行編譯)
                enforce: 'pre',
                test: /.(js|jsx)$/,
                loader: 'eslint-loader',
                exclude: [
                    path.join(__dirname,'../node_modules')
                ]
            },
            {   //將jsx轉換成 js
                test: /.jsx$/,
                loader: 'babel-loader'
            },
            {   //將ES6語法轉成 低版本語法
                test: /.js$/,
                loader: 'babel-loader',
                exclude: [//排除node_modules 下的js
                    path.join(__dirname,'../node_modules')
                ]
            }
        ]
    },
    plugins: [
        // 生成一個html頁面，同時把全部 entry打包後的 output 文件所有注入到這個html頁面
        new HTMLPlugin({
            template: path.join(__dirname, '../client/template.html')
        })
    ],
    //開發模式
    mode: 'development'
}

if(isDev){
    config.entry = [
        'react-hot-loader/patch', //設置這裏
        path.join(__dirname, '../client/app.js')
    ]
    config.devtool = '#cheap-module-eval-source-map' // source-map 方便排錯
    config.devServer = {
        host: '127.0.0.1',
        port: '8887',
        contentBase: path.join(__dirname, '../dist'), //告訴服務器從哪一個目錄中提供內容
        hot: true,//啓用 webpack 的模塊熱替換特性
        overlay: {//當出現編譯器錯誤或警告時，就在網頁上顯示一層黑色的背景層和錯誤信息
            errors: true
        },
        publicPath: '/public/',//webpack-dev-server打包的內容是放在內存中的，這些打包後的資源對外的的根目錄就是publicPath，換句話說，這裏咱們設置的是打包後資源存放的位置
        historyApiFallback: {
            index: '/public/index.html'
        }
    }
    config.plugins = [...config.plugins, new webpack.HotModuleReplacementPlugin() ]
}
module.exports = config
複製代碼

安裝包依賴

# react
yarn add react react-dom
# webpack相關
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin --dev
# babel相關
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react
複製代碼

• babel-loader：使用 Babel 轉換 JavaScript依賴關係的 Webpack 加載器
• @babel/core：即 babel-core，將 ES6 代碼轉換爲 ES5
• @babel/preset-env：即 babel-preset-env，根據您要支持的瀏覽器，決定使用哪些 transformations / plugins 和 polyfills，例如爲舊瀏覽器提供現代瀏覽器的新特性
• @babel/preset-react：即 babel-preset-react，針對全部 React 插件的 Babel 預設，例如將 JSX 轉換爲函數

.babelrc

{
    "presets": [ "@babel/preset-env", "@babel/preset-react" ],
    "plugins": [
        "react-hot-loader/babel"
    ]
}
複製代碼

webpack-dev-server 配置

devServer = {
    host: '127.0.0.1',
    port: '8887',
    contentBase: path.join(__dirname, '../dist'), //告訴服務器從哪一個目錄中提供內容
    hot: true,//啓用 webpack 的模塊熱替換特性
    overlay: {//當出現編譯器錯誤或警告時，就在網頁上顯示一層黑色的背景層和錯誤信息
        errors: true
    },
    publicPath: '/public/',//webpack-dev-server打包的內容是放在內存中的，這些打包後的資源對外的的根目錄就是publicPath，換句話說，這裏咱們設置的是打包後資源存放的位置
    historyApiFallback: {// 404時頁面跳轉
        index: '/public/index.html'
    }
}
複製代碼

react-hot-loader 熱更替

步驟1 安裝

yarn add react-hot-loader
複製代碼

步驟2

在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，必定要寫在entry 的最前面

entry = [
        'react-hot-loader/patch', //設置這裏
        path.join(__dirname, '../client/app.js')
    ]
複製代碼

步驟3

在 webpack.config.js 中設置 devServer 的 hot 爲 true

步驟4

在 .babelrc 裏添加 plugin

"plugins": [
    "react-hot-loader/babel"
]
複製代碼

步驟5

在 webpack.config.js 的 plugins 裏添加依賴的 HotModuleReplacement 插件

plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.HotModuleReplacementPlugin() //設置這裏
]
複製代碼

步驟6

最後這個操做就是在頁面的主入口

import React from 'react';
import ReactDOM from 'react-dom';
import Greeter from './greeter';
import "./main.css";
import { AppContainer } from 'react-hot-loader'; //設置這裏
 
const render = (App) => {
	ReactDOM.render(
		<AppContainer> <App /> </AppContainer>,
	document.getElementById('root')
	)
}
 
render(Greeter)
 
// Hot Module Replacement API 
if (module.hot) {
    module.hot.accept('./greeter', () => {
        render(require('./greeter').default)
    })
}
複製代碼

使用eslint和editorconfig規範代碼

爲何要使用這些？

• 規範代碼有利於團隊協做
• 純手工規範時費力，並且不能保證準確性
• 能配合編輯自動提醒錯誤，提升開發效率

安裝

yarn add eslint babel-eslint eslint-config-airbnb eslint-config-standard eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard --dev
複製代碼

.eslintrc

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": "airbnb",
    "rules": {
        "semi": [0],
        "react/jsx-filename-extension": [0]
    }
}
複製代碼

webpack.config.js 中新增配置

rules: [
  {
    //前置(在執行編譯以前去執行eslint-loader檢查代碼規範，有報錯就不執行編譯)
    enforce: 'pre',
    test: /.(js|jsx)$/,
    loader: 'eslint-loader',
    exclude: [
        path.join(__dirname,'../node_modules')
    ]
  }
]
複製代碼

eslint 使用技巧

使用技巧

1 若是你不想讓某一行被eslint檢測，就在這行添加註釋 eslint-disable-line

const NextApp = require('./App.jsx').default //eslint-disable-line
複製代碼

2 你也能夠不採用某條校驗規則

{
  "rules": {
    "semi": [0],
    "react/jsx-filename-extension": [0]
  }
}
複製代碼

3 ESLint 忽略特定的文件和目錄

在項目根目錄建立一個 .eslintignore 文件告訴 ESLint 去忽略特定的文件和目

build/*.js
複製代碼

4 eslint 配合git

在git commit代碼的時候，使用git hook 調用eslint進行代碼規範驗證，不規範的代碼沒法提交到倉庫

yarn add husky --dev
複製代碼

在package.json下新增兩個 script

"scripts": {
    "eslint": "eslint --ext .js --ext .jsx client/",
    "precommit": "npm run lint"
  }
複製代碼

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_lint = lf
insert_final_newline = true
trim_trailing_whitespace = true
複製代碼

package.json 的scripts

"scripts": {
    "clear": "rimraf dist",
    "build:client": "webpack --config build/webpack.config.client.js",
    "build:server": "webpack --config build/webpack.config.server.js",
    "build": "npm run clear && npm run build:client && npm run build:server",
    "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
    "dev:server": "nodemon server/server.js",
    "eslint": "eslint --ext .js --ext .jsx client/",
    "precommit": "npm run eslint"
  },
複製代碼

yarn add rimraf cross-env --dev
複製代碼

rimraf

rimraf 包的做用：以包的形式包裝rm -rf命令，就是用來刪除文件和文件夾的，無論文件夾是否爲空，均可以刪除
rimraf 要刪除的目錄
複製代碼

cross-env

這個迷你的包(cross-env)可以提供一個設置環境變量的scripts，讓你可以以unix方式設置環境變量，而後在windows上也能兼容運行。解決跨平臺設置NODE_ENV的問題
cross-env NODE_ENV=development
複製代碼