從零搭建一個全棧項目（五）—— react重構客戶端

1、內容簡介

因爲前面客戶端代碼爲html+js+jquery，這種最原始的寫法並不利於後續代碼維護和添加新功能，因此使用react將以前代碼進行重構。其好處一個是使用react可使後面的代碼更利於維護可讀性更好，並且在使用wepack本身搭建react項目中會遇到各類各樣的問題，在解決這些問題也能對webpack和react甚至是其餘相關內容有更深入認識。

2、主要內容

1. webpack搭建react項目；
2. react重構客戶端代碼。

3、webpack優化及配置

1.打包多頁面優化：
以前webpack在打包多頁面直接在plugins中配置了多個HtmlWebpackPlugin，在HtmlWebpackPlugin的template中設置一個通用的html模版：

這種寫法雖然可行，可是同樣的東西複製了好多遍，不是一個好的代碼改有的。因此將這部分改成node獲取pages目錄下的全部文件，而後所有添加到 plugins中：

const pagesFileName = path.resolve(__dirname, '../client/pages')

const plugins = [
  new webpack.NoEmitOnErrorsPlugin(),
  new CleanWebpackPlugin(),
  new UglifyJsPlugin(),
  new OptimizeCSSAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano')
  }),
  new MiniCssExtractPlugin({
    filename: 'css/[name].[contenthash:8].css',
    chunkFilename: 'css/[name].[contenthash:8].css',
    ignoreOrder: false
  })
]

// 添加多頁面
fs.readdirSync(pagesFileName).forEach(name => {
  plugins.push(
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: name + '.html',
      chunks: [name, 'manifest', 'vendors', 'common']
    })
  )
})
複製代碼

2. babel優化
將balel中presets寫到了.babelrc中，添加了@babel/preset-react對jsx代碼進行編譯：

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}
複製代碼

3. 設置了webpack別名
直接在alias中，設置本身喜歡的名字和對應目錄的路徑便可：

resolve: {
    alias: {
      '@common': path.resolve(__dirname, '../client/common')
    }
  },

複製代碼

我這裏只設置了公共代碼的別名 @common。
4. 添加了css前綴
主要使用到了postcss-loader和autoprefixer。只需處理css的loader中加上postcss-loader；在postcss.config.js中寫入postcss-loader的相關配置；在package.json中添加browserslist設置須要兼容的瀏覽器便可：

// webpack.common.js

{
    test: /\.css$/i,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '/'
        }
      },
      { loader: 'css-loader', options: { importLoaders: 1 } },
      'postcss-loader'
    ]
}


// postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')()]
}


// package.json

  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
複製代碼

4、客戶端代碼重構

其實前面對webpack進行優化後，重構客戶端代碼就比較容易了，就是代碼轉成了react的寫法，具體的業務相關代碼就很少介紹了，就是按react的語法改了以前的代碼。這裏介紹一下每一個頁面的結構。 因爲webpack在進行編譯時入口都設置爲 index.js:

// 入口
const entries = fs.readdirSync(pagesFileName).reduce((entries, dir) => {
  const fullDir = path.join(pagesFileName, dir)
  
  // 這裏都是拼接了index.js
  const entry = path.join(fullDir, 'index.js')
  
  if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
    entries[dir] = ['webpack-hot-middleware/client', entry]
  }
  return entries
}, {})
複製代碼

因此當我要建立一個新頁面的時候須要在每一個目錄下新建index.js用來做爲頁面的入口：

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
複製代碼

App.js則爲當前頁面的根組件。

5、總結

本章介紹了用react重構以前jquery代碼時須要對webpack進行的一些優化即配置，因爲目前項目邏輯比較簡單，在項目中使用react的代碼也都是最基礎的語法，因此主要介紹了一些使用webpack構建react項目的方法。

6、最後

GitHub地址：戳這裏

本項目僅爲學習交流使用，若是有小夥伴有更好的建議歡迎提出來你們一塊兒討論，另外感興趣的小夥伴就點個star吧！ ^_^