項目方案分享：react + mobx + ssr

文章目的

• 分享/記錄 直接集成好的 react + mobx + ssr 的項目模板，方便快速搭建新項目
• 分享/記錄 在集成項目的過程當中，遇到的一些問題

方案案例倉庫

github.com/SamXChen/re…

方案特色

1. 能夠持續集成功能；
2. 容許 ssr 出錯自動降級，使用客戶端渲染；
3. 容許項目中存在部分頁面使用同構，部分不使用同構；
4. 案例中的 mobx 同構，不須要使用 Provider 提供總體的數據樹；

遇到過的問題

一、monorepo 項目結構中，使用 babel 7 編譯 node_modules 模塊的問題

問題解析：

babel 7 開始，在使用 .babelrc 的狀況下，默認忽略 node_modules，致使 node_modules 中systemlink 的 模塊源碼沒法被正常編譯

解決方法：

改成 babel.config.js 進行 babel 配置描述，能夠順利進行 systemlink 模塊的編譯，並提升配置的靈活性

二、css-loader，babel-react-css-module 在同構兩端 hash 問題

問題描述：

同構兩端 的 style-name 編譯事後，class name 後綴的 hash 不一致

問題解析：

查看 css-loader 源碼，css-loader 與 babel-react-css-module 的配置項中，有個 context 的輸入項，用於生產 hash。context 可爲任意的 字符串，可是，context 在 css-loader 源碼中會被 path resolve (context 與 resourcePath)，若是 context 不是一個有效的路徑字符串，那麼同構兩側最終用於生產 hash 的依據會不一致

問題解決：

a、將同構兩側的 css-loader 中的 context 統一改成當前項目的根路徑

b、得益於使用 babel.config.js，爲同構兩端的 react-css-module 動態設置 context 爲當前項目的根路徑；

結果：

同構兩端生產的 class 命名一致，同時保留 css-modules 特性

三、webpack 打包 nodejs 模塊下 選擇模塊化標準問題（經典問題）

問題描述：

同構端獲取客戶端源碼文件後，進行打包，打包後的代碼沒法在服務端進行運行，提示 「__webpack__require(…) is not a function」或者 模塊初始化後沒有正常 export

問題解析：

針對 webpack 配置，將輸出 bundle 模塊化形式改成可直接被 nodejs 讀取使用的 commonjs 形式（commonjs2）

四、babel 配置中，preset-env 的設置問題

問題描述：

同構端 無需運行 preset-env

問題解決：

在同構端 的 babel.config.js 中，去除 preset-env

五、resolve-url-loader 在同構兩端的配置問題

問題描述：

同構端 複用 客戶端的打包配置，打包過程當中，報錯 媒體文件（圖片，公共樣式）沒法 找到

問題解析 與 解決：

同理 css-loader，須要對同構端的 resolve-url-loader 的 root 指定爲客戶端模塊的對應的資源目錄

注意點

沒法避免的問題，用於同構處理的客戶端模塊，必須考慮被同構使用時的兼容性處理，並不是全部的客戶端模塊能夠直接被用於同構