2. 程式人生 > >React最佳實踐嘗試（二）

React最佳實踐嘗試（二）

阿新 • • 發佈：2018-11-11

配置完成之後，接下來就要考慮打包啟動以及前後端同構的架構方面的問題了。

webpack打包

首先我的整體思路是：根據webpack.ssr.config.js配置檔案，將前端程式碼打包進node層供node做SSR使用，然後前端正常啟動webpack-dev-server伺服器即可。

package.json
"startfe": "run-p client ssr",
"client": "BABEL_ENV=client NODE_ENV=development webpack-dev-server --config public/webpack.dev.config.js",
"ssr": "BABEL_ENV=ssr NODE_ENV=development webpack --watch --config public/webpack.ssr.config.js",
複製程式碼

將前端程式碼打包進node之後，在正常啟動node伺服器即可：

package.json
"start": "BABEL_ENV=server NODE_ENV=development nodemon src/app.ts --exec babel-node --extensions '.ts,.tsx'",
複製程式碼

這樣基本上webpack整體的打包思路就清晰了。

最終生產模式中，我們只需要將整個前端程式碼通過webpack打包進src目錄，然後將整個src目錄經過babel轉義之後輸出到output目錄，最終我們的生產模式只需要啟動output/app.js即可。

package.json
"buildfe": "run-p client:prod ssr:prod",
"build": "BABEL_ENV=server NODE_ENV=production babel src -D -d output/src --extensions '.ts,.tsx'",
"ssr:prod": "BABEL_ENV=ssr NODE_ENV=production webpack --config public/webpack.ssr.config.js",
"client:prod": "BABEL_ENV=client NODE_ENV=production webpack --progess --config public/webpack.prod.config.js",
複製程式碼
 
$ node output/app.js // 啟動生產模式
複製程式碼

webpack配置

在客戶端的打包中，我們需要使用webpack-manifest-plugin外掛。這個外掛可以將webpack打包之後所有檔案的路徑寫入一個manifest.json的檔案中，我們只需要讀取這個檔案就可以找到所有資源的正確路徑了。

部分webpack.client.config.js
const ManifestPlugin = require("webpack-manifest-plugin");
module.exports = merge(baseConfig, {
  // ...
  plugins: [
    new ManifestPlugin(),
    // ...
  ]
});
複製程式碼
Mapping loaded modules to bundles

In order to make sure that the client loads all the modules that were rendered server-side, we'll need to map them to the bundles that Webpack created.

我們的客戶端渲染使用了react-loadable，需要知道該模組是否提前經過了服務端渲染，否則會出現重複載入的問題。因此需要將webpack打包後的bundles生成一個map檔案，然後在ssr的時候傳入react-loadable。這裡我們使用react-loadable/webpack外掛即可。

部分webpack.client.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';
const outputDir = path.resolve(__dirname, "../src/public/buildPublic");
plugins: [
    // ...
    new ReactLoadablePlugin({
      filename: path.resolve(outputDir, "react-loadable.json")
    })
    // ...
  ],
複製程式碼

接下來是webpack打包產物的資源路徑問題。

生產模式一般都是將輸出的檔案上傳到cdn上，因此我們只需要在pubicPath的地方使用cdn地址即可。

部分webpack.prod.config.js
mode: "production",
output: {
    filename: "[name].[chunkhash].js",
    publicPath: "//cdn.address.com",
    chunkFilename: "chunk.[name].[chunkhash].js"
  },
複製程式碼

開發環境中我們只需要讀取manifest.json檔案中相對應模組的地址即可。

manifest.json
{
  "home.js": "http://127.0.0.1:4999/static/home.js",
  "home.css": "http://127.0.0.1:4999/static/home.css",
  "home.js.map": "http://127.0.0.1:4999/static/home.js.map",
  "home.css.map": "http://127.0.0.1:4999/static/home.css.map"
}
複製程式碼

SSR程式碼

解決了打包問題之後，我們需要考慮ssr的問題了。

其實整體思路比較簡單：我們通過打包，已經有了manifest.json檔案儲存靜態資源路徑，有react-loadable.json檔案儲存打包輸出的各個模組的資訊，只需要在ssr的地方讀出js、css路徑，然後將被<Loadable.Capture />包裹的元件renderToString一下，填入pug模板中即可。

src/utils/bundle.ts
function getScript(src) {
  return `<script type="text/javascript" src="${src}"></script>`;
}
function getStyle(src) {
  return `<link rel="stylesheet" href="${src}" />`;
}

export { getScript, getStyle };
複製程式碼
src/utils/getPage.ts
import { getBundles } from "react-loadable/webpack";
import React from "react";
import { getScript, getStyle } from "./bundle";
import { renderToString } from "react-dom/server";
import Loadable from "react-loadable";

export default async function getPage({
  store,
  url,
  Component,
  page
}) {
  const manifest = require("../public/buildPublic/manifest.json");
  const mainjs = getScript(manifest[`${page}.js`]);
  const maincss = getStyle(manifest[`${page}.css`]);

  let modules: string[] = [];

  const dom = (
    <Loadable.Capture
      report={moduleName => {
        modules.push(moduleName);
      }}
    >
      <Component url={url} store={store} />
    </Loadable.Capture>
  );
  const html = renderToString(dom);

  const stats = require("../public/buildPublic/react-loadable.json");
  let bundles: any[] = getBundles(stats, modules);

  const _styles = bundles
    .filter(bundle => bundle && bundle.file.endsWith(".css"))
    .map(bundle => getStyle(bundle.publicPath))
    .concat(maincss);
  const styles = [...new Set(_styles)].join("\n");

  const _scripts = bundles
    .filter(bundle => bundle && bundle.file.endsWith(".js"))
    .map(bundle => getScript(bundle.publicPath))
    .concat(mainjs);
  const scripts = [...new Set(_scripts)].join("\n");

  return {
    html,
    __INIT_STATES__: JSON.stringify(store.getState()),
    scripts,
    styles
  };
}
複製程式碼

路徑說明：src/public目錄存放所有前端打包過來的檔案，src/public/buildPublic存放webpack.client.config.js打包的前端程式碼，src/public/buildServer存放webpack.ssr.config.js打包的服務端渲染的程式碼。

這樣服務端渲染的部分就基本完成了。

其他node層啟動程式碼可以直接檢視src/server.ts檔案即可。

前後端同構

接下來就要編寫前端的業務程式碼來測試一下服務端渲染是否生效。

這裡我們要保證使用最少的程式碼完成前後端同構的功能。

首先我們需要在webpack中定義個變數IS_NODE，在程式碼中根據這個變數就可以區分ssr部分的程式碼和客戶端部分的程式碼了。

webpack.client.config.js
plugins: [
    // ...
    new webpack.DefinePlugin({
        IS_NODE: false
    })
    // ...
]
複製程式碼

接下來編寫前端頁面的入口檔案，入口這裡要對ssr和client做區別渲染：

public/js/decorators/entry.tsx
import React, { Component } from "react";
import { Provider } from "react-redux";
import ReactDOM from "react-dom";
import Loadable from "react-loadable";
import { BrowserRouter, StaticRouter } from "react-router-dom";

// server side render
const SSR = App =>
  class SSR extends Component<{
    store: any;
    url: string;
  }> {
    render() {
      const context = {};
      return (
        <Provider store={this.props.store} context={context}>
          <StaticRouter location={this.props.url}>
            <App />
          </StaticRouter>
        </Provider>
      );
    }
  };

// client side render
const CLIENT = configureState => Component => {
  const initStates = window.__INIT_STATES__;
  const store = configureState(initStates);
  Loadable.preloadReady().then(() => {
    ReactDOM.hydrate(
      <Provider store={store}>
        <BrowserRouter>
          <Component />
        </BrowserRouter>
      </Provider>,
      document.getElementById("root")
    );
  });
};

export default function entry(configureState) {
  return IS_NODE ? SSR : CLIENT(configureState);
}
複製程式碼

這裡entry引數中的configureState是我們store的宣告檔案。

public/js/models/configure.ts
import { init } from "@rematch/core";
import immerPlugin from "@rematch/immer";
import * as models from "./index";

const immer = immerPlugin();

export default function configure(initStates) {
  const store = init({
    models,
    plugins: [immer]
  });
  for (const model of Object.keys(models)) {
    store.dispatch({
      type: `${model}/@init`,
      payload: initStates[model]
    });
  }
  return store;
}
複製程式碼

這樣就萬事俱備了，接下來只需要約定我們單頁的入口即可。

這裡我將單頁的入口都統一放到public/js/entry目錄下面，每一個單頁都是一個目錄，比如我的專案中只有一個單頁，因此我只建立了一個home目錄。

每一個目錄下面都有一個index.tsx檔案和一個routes.tsx檔案，分為是單頁的整體入口程式碼，已經路由定義程式碼。

例如：

/entry/home/routes.tsx
import Loadable from "react-loadable";
import * as Path from "constants/path";
import Loading from "components/loading";

export default [
  {
    name: "demo",
    path: Path.Demo,
    component: Loadable({
      loader: () => import("containers/demo"),
      loading: Loading
    }),
    exact: true
  },
  {
    name: "todolist",
    path: Path.Todolist,
    component: Loadable({
      loader: () => import("containers/todolist"),
      loading: Loading
    }),
    exact: true
  }
];
複製程式碼
/entry/home.index.tsx
import React, { Component } from "react";
import configureStore from "models/configure";
import entry from "decorators/entry";
import { Route } from "react-router-dom";
import Layout from "components/layout";
import routes from "./routes";

class Home extends Component {
  render() {
    return (
      <Layout>
        {routes.map(({ path, component: Component, exact = true }) => {
          return (
            <Route path={path} component={Component} key={path} exact={exact} />
          );
        })}
      </Layout>
    );
  }
}

const Entry = entry(configureStore)(Home);
export { Entry as default, Entry, configureStore };
複製程式碼

Layout元件是存放所有頁面的公共部分，比如Nav導航條、Footer等。

這樣所有的準備工作就已經做完了，剩下的工作就只有編寫元件程式碼以及首屏資料載入了。

系列文章：

  1. React最佳實踐嘗試（一）技術選型
  2. React最佳實踐嘗試（三）

相關推薦

React最佳實踐嘗試（二）

配置完成之後，接下來就要考慮打包啟動以及前後端同構的架構方面的問題了。 webpack打包 首先我的整體思路是：根據webpack.ssr.config.js配置檔案，將前端程式碼打包進node層供node做SSR使用，然後前端正常啟動webpack-dev-server伺服器即可。 package.j

React最佳實踐嘗試（三）

github地址：github.com/bbwlfx/ts-b… 第一個頁面 配置完畢之後，接下來就開始開發一個簡單的Demo頁面吧~ 首先要定義好Demo的model模型： models/demo.ts import { demoModalState } from "typings"; i

小微企業阿里雲最佳實踐系列（二）：RDS 資料庫與DMS 資料庫管理（資料管理）

關聯博文小微企業阿里雲最佳實踐系列（一）：ECS 伺服器與 RDS 資料庫 概述 閱讀物件 本博文主要寫給創業團隊、技術團隊人數 < 5 人、沒有專業運維等小微企業作為參考，需要掌握基礎的伺服器管理、軟體開發等經驗。 博文主要內容 在上一篇博文中主要介紹了 ECS 伺服器與 RDS 資料庫，在

OPEN(SAP) UI5 學習入門系列之二： 最佳實踐練習（上）

我們暫時不用Component來做模組化，我們先用最快最簡單的方法讓程式可以跑出個樣子來，然後再慢慢的新增功能。  所以，我們先直接加入MVC。 簡單介紹下，MVC就是模型、檢視和控制器的簡稱，一般的Web開發都會用到這種架構用來把前端的UI和業務邏輯分離。具體先不多介紹，直接做吧。 我們先大致規劃一下，我

OPEN(SAP) UI5 學習入門系列之二： 最佳實踐練習（下）

可以先把程式碼下載到本地並跑起來，這樣可以對這個最佳實踐的程式有一個直觀的瞭解。 頁面導航如下：  銷售訂單列表(Master) -> 銷售訂單明細(Detail) -> 行專案明細(LineItem),在每個明細頁面都可以返回到上一層。 具體頁面之間的導航是如何實現的呢？  我們從頁面的入口 

linux設備驅動之平臺總線實踐環節（二）

linux設備驅動模型1、上一節中，我們將初步的驅動代碼寫完後編譯後，放入到rootfs中進行insmod時，在/sys/bus/platform/drvier/目錄中能夠看到why_led這個目錄，但是進入後只有一些基本的東西，卻沒有能使用這個led驅動的關鍵性東西，那是因為我們沒有提供platform_d

node 爬蟲初嘗試（二）async控制並發量

響應 大並發 title 數組 並發控制 指定 ref gb2312 nav var eventproxy = require(‘eventproxy‘);//並發控制 var async = require(‘async‘);//並發量控制 var express = r

.net core 實踐筆記（二）--EF連接Azure Sql

grand caf info mod soft 去掉 https lin als ** 溫馨提示：如需轉載本文，請註明內容出處。** 本文鏈接:https://www.cnblogs.com/grom/p/9902098.html 　　筆者使用了常見的三層架構，Api展

.net core 實踐筆記（二）--EF連線Azure Sql

** 溫馨提示：如需轉載本文，請註明內容出處。** 本文連結:https://www.cnblogs.com/grom/p/9902098.html   　　筆者使用了常見的三層架構，Api展示層注入了Swagger,作為開發測試使用的文件介面，具體搭建教程網上資料很全，不在贅述。

React的環境搭建（二）

  babel    將使用es7  es6 寫的程式碼， 統統轉化為es5 1  安裝babel 模組   2  設定babel配置   3   修改webpack.

08 React+Ant Design學習（二）——路由配置

路由配置流程： 具體操作流程       1 開啟計算機命令列工具，輸入命令“npm install react-router --save-dev”安裝路由包，如果出現下圖所示資訊，則說明安裝失敗： 解決方法：       出現此問題的原因主要是

介面測試指令碼實踐記錄（二）

一 分別請求3個介面，獲取響應。 第三方介面返回有兩種：1 純字串  2 帶bom頭的json字串 import requests api1 = 'url1' response1 = requests.get(api1) result1 = response

接口測試腳本實踐記錄（二）

re.search div str2 lis key 正則 clas bom ret 一 分別請求3個接口，獲取響應。 第三方接口返回有兩種：1 純字符串 2 帶bom頭的json字串 import requests api1 = ‘url1‘ response1 =

react-native-android-unity（二）建立unity專案，並匯出為android程式碼包，嵌入android專案中

1.建立unity專案 給Main Camera新增指令碼Android，使用C#開發，指令碼內容如下： using System.Collections;
using System.Colle

SCRUM實踐誤區（二）

誤區二：以為“自我管理”等同於“隨心所欲” 我們鼓勵自我管理是因為一線的員工比以往更聰明，更訓練有素，我們發現人的高效率來自精確的知道自己的工作，並以最好和最省力的方式來實現。而且個人往往在處理自己的問題的時候，表現出高度集中和快速的提高。自我管理是授權給了員工自己設定目

【一起來學React】- Reudx學習（二）

上篇文章我們說到redux一些基礎和在react中如何運用。本文講解在react中如何更加優雅的編寫redux！ 上一篇文章地址：https://blog.csdn.net/Fakin/article/details/85287116 非同步Action 在redu

React Native 學習筆記（二）

坑一，環境好了，但是因為專案需求經常要安裝一些三方庫，xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Develope

小微企業阿里雲最佳實踐系列（一）：ECS 伺服器與 RDS 資料庫

關聯博文小微企業阿里雲最佳實踐系列（二）：RDS 資料庫與DMS 資料庫管理（資料管理） 概述 閱讀物件 本博文主要寫給創業團隊、技術團隊人數 < 5 人、沒有專業運維等小微企業作為參考，需要掌握基礎的伺服器管理、軟體開發等經驗。 博文主要內容 本博文主要使用傳統伺服器架構與雲服務架構進行橫向

資料庫實踐操作（二）--資料庫遷移方案

例如：開發好的銀行系統進行遷移 介紹四種方法 1>分離附加法（常當前資料庫中分離） 前提：該資料庫不處於被訪問狀態 1>開啟要分離的資料庫檔案位置 右擊資料庫屬性–檔案–複製路徑–win+R開啟路徑 注意：開啟這一

AngularJS 指令實踐指南（二）

這個系列教程的第一部分給出了AngularJS指令的基本概述，在文章的最後我們介紹瞭如何隔離一個指令的scope。第二部分將承接上一篇繼續介紹。首先，我們會看到在使用隔離scope的情況下，如何從指令內部訪問到父scope的屬性。接著，我們會基於對 controll