从零搭建一个全栈项目（五）—— react重构客户端react重构客户端代码。这种写法虽然可行，但是一样的东西复制了好

一、内容简介

由于前面客户端代码为html+js+jquery，这种最原始的写法并不利于后续代码维护和添加新功能，所以使用react将之前代码进行重构。其好处一个是使用react可以使后面的代码更利于维护可读性更好，而且在使用wepack自己搭建react项目中会遇到各种各样的问题，在解决这些问题也能对webpack和react甚至是其他相关内容有更深刻认识。

二、主要内容

webpack搭建react项目；
react重构客户端代码。

三、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"
  ]

四、客户端代码重构

其实前面对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则为当前页面的根组件。

五、总结

本章介绍了用react重构之前jquery代码时需要对webpack进行的一些优化即配置，由于目前项目逻辑比较简单，在项目中使用react的代码也都是最基础的语法，所以主要介绍了一些使用webpack构建react项目的方法。

六、最后

GitHub地址：戳这里

本项目仅为学习交流使用，如果有小伙伴有更好的建议欢迎提出来大家一起讨论，另外感兴趣的小伙伴就点个star吧！ ^_^