摘要：配置方式找到文件如需添加路由則在里面添加，同時(shí)需要后端更改配置除了上面的路徑，其他路徑全部指向單頁應(yīng)用多路由預(yù)渲染指南使用說明源碼為方便快速構(gòu)建項(xiàng)目，本例所有配置的代碼均放在項(xiàng)目中。

每次構(gòu)建react項(xiàng)目的時(shí)候都會(huì)配置一大堆東西，時(shí)間久了就會(huì)忘記怎么配置。為了方便自己記憶也為了其他開發(fā)者在構(gòu)建react應(yīng)用時(shí)能夠快速開發(fā)，故作此記錄。

本項(xiàng)目基于 create-react-app 腳手架進(jìn)行配置。主要配置了一些項(xiàng)目開發(fā)中常用的方法，比如 webpack的 sass，redux、熱加載、代理以及其他工具庫的引入等等。

首先，要先利用create-react-app創(chuàng)建一個(gè)react項(xiàng)目，可參考 https://github.com/facebookin...

安裝 create-react-app

npm install -g create-react-app

創(chuàng)建一個(gè)應(yīng)用程序

create-react-app my-app
cd my-app

注：my-app是指項(xiàng)目的名稱，用戶可以自定義項(xiàng)目名稱

這個(gè)時(shí)候可以在命令行輸入

npm start : 啟動(dòng)項(xiàng)目就能看到項(xiàng)目啟動(dòng)頁面了。

npm run build : 項(xiàng)目發(fā)布。

這樣一個(gè)簡單的react項(xiàng)目就初始化完畢了。

但是，默認(rèn)所有配置是隱藏起來的，要想自定義配置，需要運(yùn)行一個(gè)命令：npm run eject
此時(shí)會(huì)提示，該命令不可逆，是否繼續(xù)，輸入y，這樣所有配置項(xiàng)就都出來了。會(huì)生成一個(gè)config文件夾，這時(shí)候也可以做一些定制化的配置了。

引入element-react UI框架會(huì)報(bào)錯(cuò) ReferenceError: “Symbol”未定義

解決方案：

項(xiàng)目中引入babel-polyfill,在app.js中導(dǎo)入即可

基于webpack的一些配置

腳手架默認(rèn)沒有配置sass，項(xiàng)目中如果使用sass需要多帶帶配置

1、安裝依賴 npm install --save-d node-sass sass-loader
2、修改config下面的webpack.config.dev.js和webpack.config.prod.js,都需要修改,開發(fā)環(huán)境和發(fā)布環(huán)境是多帶帶的配置。

修改cssloader
將test: /.css$/, 修改為： test: /.(css|scss|sass)$/,即識(shí)別scss/sass文件

最后添加
sass-loader

別名在項(xiàng)目中方便我們快速引入文件。比如我們項(xiàng)目中有一個(gè)公共文件目錄為src/util/tools，例如有以下文件結(jié)構(gòu)

├── src                                   
│?? ├── assets                            # 項(xiàng)目資源
│?? │   └── ...
│?? ├── containers                        # 頁面容器
│?? │   └── pages
│?? │       └── pageA                     # 頁面A     
│?? │           └───a.js                  # a.js           
│?? │── utils                             # 其他工具類
│?? │   └── tools
│?? ├── index.js                          # webpack打包入口文件

在層級(jí)很深的組件內(nèi)部a.js需要引入tools文件，我們會(huì)使用../../../util/tools去找到文件的相對(duì)位置，但是在使用webpack配置的別名后可以直接定位到/src目錄下。

// 未使用別名
import tools from "../../../util/tools";

// 使用別名后
import tools from "@/util/tools";  // "@/" 指向 "src/"

配置方式

dev和prod環(huán)境都需要配置

在resolve/alias進(jìn)行配置

其中 resolve 是一個(gè)自定義函數(shù)。

function resolve(dir) {
    return path.join(__dirname, "..", dir)
}

也可以寫成

"@": path.join(__dirname, "..", "src")

create-react-app項(xiàng)目中配置的有熱加載，我們只需要在項(xiàng)目入口文件index.js中啟用熱加載就行，直接在末尾添加

// index.js
/* 熱加載 */
if (module.hot) {
  module.hot.accept();
}

在前端開發(fā)中請(qǐng)求接口經(jīng)常會(huì)遇到跨域的問題，處理跨域的方式有很多，多數(shù)webpack是配置dev_server，但這種方法在create-react-app 生成的應(yīng)用中無效，對(duì)于這種應(yīng)用應(yīng)在package.json處進(jìn)行代理

// package.json
"proxy": "http://api.enjoycut.com/"

// 或者
"proxy": {
    "/article": {
      "target": "http://api.enjoycut.com/",
      "changeOrigin": true,
      "secure": false
    }
  }
// 下面的方式?jīng)]有配置過

react-router4的使用方式和以前的router版本使用方式不同

react-router4文檔地址

在項(xiàng)目中可以直接通過@connect方式訪問redux

未配置

配置后

需要說明的是，這里用了裝飾器，需要安裝模塊babel-plugin-transform-decorators-legacy

然后在package.json里面配置plugins

在react 中切換className比較麻煩，簡單的可以使用三目運(yùn)算，但是復(fù)雜一點(diǎn)的class就比較麻煩了，比如這個(gè)稍微復(fù)雜點(diǎn)的div動(dòng)態(tài)切換多個(gè)className, 推薦一個(gè)工具庫，可以簡單方便的切換className.

clsssnames使用文檔

      

      // 默認(rèn)classNAme： "clip_item"
      // isActive    === true 則添加className "clip_active"
      // is_dragging === true 則添加className "dragging"

在項(xiàng)目中格式化時(shí)間的工具庫，將時(shí)間格式化成你想要的任何格式！非常方便。

moment().format("MMMM Do YYYY, h:mm:ss a"); // 九月 10日 2018, 7:04:30 晚上
moment().format("ffffdd");                    // 星期一
moment().format("MMM Do YY");               // 9月 10日 18
moment().format("YYYY [escaped] YYYY");     // 2018 escaped 2018
moment().format();                          // 2018-09-10T19:04:30+08:00

moment.js文檔地址：http://momentjs.cn/

一般情況下，我們按照antd官網(wǎng)使用方式在css中導(dǎo)入整個(gè)ui的樣式，@import "~antd/dist/antd.css";，
比如我們?cè)陧?xiàng)目中只使用了Button，和Table，但是這樣實(shí)際上加載了全部的 antd 組件的樣式（對(duì)前端性能是個(gè)隱患）；
因此我們需要使用按需加載，只加載我們使用過得組件樣式。

注意：如果是運(yùn)行了eject ，webpack配置了babelrc: false ,多帶帶根目錄新建.babelrc會(huì)報(bào)錯(cuò)的，需要在webpack.dev.js配置，在module模塊 ,loader: require.resolve("babel-loader")對(duì)象中的plugins數(shù)組中添加

這里只展示允許eject暴露了webpack配置文件的配置方式，未暴露webpack配置方式請(qǐng)參考https://segmentfault.com/a/11...

安裝babel-plugin-import

npm install --save-dev babel-plugin-import

給 webpack 的 babel-loader plugins 加上 babel-plugin-import

需要修改兩個(gè)文件 /config/webpack.config.prod.js 和 /config/webpack.config.dev.js (修改的內(nèi)容一樣,升級(jí)后的create-react-app合并為一個(gè)文件 webpack.config.js)找到加載 babel-loader 的地方，往他的 plugins 加入如下代碼

[
    require.resolve("babel-plugin-import"),// 導(dǎo)入 import 插件
    {
      libraryName: "antd",   //暴露antd
      style: "css"
    }
  ]

最后形成的配置如下（create-react-app 版本不同最后的配置可能不一樣，原理一樣）：

   // Process application JS with Babel.
    // The preset includes JSX, Flow, TypeScript, and some ESnext features.
    {
      test: /.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,
      loader: require.resolve("babel-loader"),
      options: {
        customize: require.resolve(
          "babel-preset-react-app/webpack-overrides"
        ),
        
        plugins: [
          [
            require.resolve("babel-plugin-named-asset-import"),
            {
              loaderMap: {
                svg: {
                  ReactComponent: "@svgr/webpack?-svgo,+ref![path]",
                },
              },
            },
          ],
          // antd按需加載
          [
            require.resolve("babel-plugin-import"),// 導(dǎo)入 import 插件
            {
              libraryName: "antd",   //暴露antd
              style: "css"
            }
          ],
        ],
        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        cacheDirectory: true,
        cacheCompression: isEnvProduction,
        compact: isEnvProduction,
      },
    },

一個(gè)動(dòng)態(tài)導(dǎo)入加載組件的高階組件.

未使用前

import Home from"./Home";

使用后

import loadable from "@/utils/loadable"
const Home = loadable(() => import("./Home "));

loadable組件

import React from "react";
import Loadable from "react-loadable";

//通用的過場組件
const loadingComponent =()=>{
  return (
    

  )
};

//過場組件默認(rèn)采用通用的，若傳入了loading，則采用傳入的過場組件
export default (loader,loading = loadingComponent)=>{
  return Loadable({
    loader,
    loading
  });
}

參考鏈接

構(gòu)建階段生成匹配預(yù)渲染路徑的 html 文件（注意：每個(gè)需要預(yù)渲染的路由都有一個(gè)對(duì)應(yīng)的 html）。構(gòu)建出來的 html 文件已有部分內(nèi)容。

如果在項(xiàng)目中同時(shí)使用代碼分隔和預(yù)加載會(huì)導(dǎo)致頁面閃屏。原因是會(huì)先加載預(yù)加載打包出來的html，渲染靜態(tài)頁面，然后會(huì)請(qǐng)求代碼分隔后該頁面的js。會(huì)導(dǎo)致html的root節(jié)點(diǎn)再次掛載。因此不推薦使用預(yù)加載的同時(shí)使用代碼分隔。

配置方式

1.npm install prerender-spa-plugin

2.找到 /config/webpack.config.prod.js文件

const path = require("path")
const PrerenderSPAPlugin = require("prerender-spa-plugin")

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, "../build"),
      // Required - Routes to render.
      routes: ["/home", "/convert", "/trim", "/merge", "/watermark", "/remove", "/download"],
    })
  ]
}

3.如需添加路由則在 routes 里面添加，同時(shí)需要后端更改ngnix配置

/ -> home/index.html
/home -> home/index.html
/convert -> convert/index.html
/trim -> trim/index.html
/merge -> merge/index.html
/watermark -> watermark/index.html
/remove -> remove/index.html
/download -> download/index.html

除了上面的路徑，其他路徑全部指向 index.html

單頁應(yīng)用多路由預(yù)渲染指南 https://juejin.im/post/59d49d976fb9a00a571d651d
使用說明 https://github.com/chrisvfritz/prerender-spa-plugin

為方便快速構(gòu)建項(xiàng)目，本例所有配置的代碼均放在github項(xiàng)目中。
https://github.com/zhaosheng8...