鍍金池/ 問(wèn)答/HTML/ react-router做ERP系統(tǒng)管理后臺(tái)，如何實(shí)現(xiàn)多站點(diǎn)路由？

react-router做ERP系統(tǒng)管理后臺(tái)，如何實(shí)現(xiàn)多站點(diǎn)路由？

現(xiàn)用react做一套后臺(tái)管理系統(tǒng)，該系統(tǒng)集成了A,B,C,D四個(gè)系統(tǒng)，4個(gè)系統(tǒng)有公用的components，需要分布在同一個(gè)域名下的不同站點(diǎn)上，如何配置webpack對(duì)這4個(gè)系統(tǒng)進(jìn)行拆包分別布置在站點(diǎn)上，如何4個(gè)系統(tǒng)放在一起協(xié)同開(kāi)發(fā)，路由如何分配。

我大概的思路是：一個(gè)項(xiàng)目，首頁(yè)用戶選擇系統(tǒng)的時(shí)候進(jìn)行路由選擇，也就是我為每個(gè)系統(tǒng)配置一個(gè)路由，選系統(tǒng)也選定一個(gè)路由，并跳至該路由的首頁(yè)，那么問(wèn)題就是webpack如何拆包將代碼布置到不同站點(diǎn)上？選擇系統(tǒng)的時(shí)候如何對(duì)路又進(jìn)行設(shè)置？

clipboard.png

回答
編輯回答
厭惡我

1.我覺(jué)得4個(gè)系統(tǒng)那就是要4個(gè)項(xiàng)目，每個(gè)項(xiàng)目都有自己的配置文件，這樣就每個(gè)系統(tǒng)都可以單獨(dú)打包，單獨(dú)上線
2.公用的components可以發(fā)布到npm或者內(nèi)部的私有庫(kù)，這樣就不同項(xiàng)目之間就可以共享，而不需要把所有的項(xiàng)目都耦合在一起

2018年9月11日 05:48
編輯回答
哎呦喂

1L正解。

當(dāng)然是建立在你愿意建立這樣一個(gè)私有庫(kù)，然后開(kāi)多個(gè)項(xiàng)目進(jìn)行管理。
如果你僅僅是一個(gè)人開(kāi)發(fā)，然后不需要考慮后期維護(hù)的復(fù)雜性。那么可以接下去設(shè)計(jì)。

|-src
   |- Common 這里存放你的通用組件或者公用的其他東西
   |- Main Main 中直接用a標(biāo)簽實(shí)現(xiàn)就可以了，通過(guò)a標(biāo)簽調(diào)到其他4個(gè)系統(tǒng)
   |- A  認(rèn)為是一個(gè)項(xiàng)目
    |- index.js   這里是一個(gè)項(xiàng)目，該怎么寫怎么寫
    |- router
    |- redux
   |- B  認(rèn)為是一個(gè)項(xiàng)目
|-webpack.config.js

最后重頭就在打包上面了。
你需要打成5個(gè)包，每個(gè)站點(diǎn)上一個(gè)包。

首先Webpack3有一個(gè)新概念叫做
Exporting multiple configurations

可以導(dǎo)出這樣的形式

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  entry: './app.js',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  entry: './app.js',
}]

你可以遍歷src下面的文件夾來(lái)進(jìn)行多個(gè)項(xiàng)目的打包。

nodejs讀取src文件夾.map((name) => {
  output: {
      filename: `.${name}/[name].js`,
  },
  entry: `./${name}.js`,
});

這是偽代碼，隨便寫的，大致思路

2018年7月25日 03:22