有沒有辦法通過替換一些資產和組件從單個應用程序構建多個應用程序？ (Is there a way to build multiple apps from single one with replacing some assets and components?)

問題描述

有沒有辦法通過替換一些資產和組件從單個應用程序構建多個應用程序？ (Is there a way to build multiple apps from single one with replacing some assets and components?)

下面有我的 create‑react‑app 項目的文件夾結構。我有一個項目，但有多個結果。在開發和構建 projectA 時，我想複製 projectA 文件夾下的所有文件並將它們粘貼到必要的地方。

我可以使用主題，但是有很多項目要構建，並且組件可以完全與項目相關。在此方法中，login.js 和其他一些組件將為每個項目設置單獨的條件塊。這些組件在幾個項目之後會很亂。而且我不希望構建文件中出現其他項目的徽標。

我選擇動態覆蓋必要的文件。我正在尋找最佳實踐。請幫忙。

projectA
    public
        index.html
        favicon.ico
    src 
        images
            logo.png
        pages
            page.js (this extends base_page)

projectB
    public
        index.html
        favicon.ico
    src 
        images
            logo.png
        pages
            page.js (this extends base_page)

public
    index.html
    favicon.ico
src
    images
        logo.png
    pages
        app.js
        base_page.js
        page.js (this extends base_page)
    index.js

參考解法

方法 1:

It's possible, but I think you first have to restructure your folders:

project
 |‑‑webpack.config.js
 `‑‑src
     |‑‑common
     |   `‑‑pages
     |      |‑‑base‑page.js
     |      `‑‑other‑resources.js
     |‑‑appA
     |   |‑‑images
     |   |  `‑‑logoA.png
     |   `‑‑pages
     |      `‑‑page.js
     |‑‑appB
     |   |‑‑images
     |   |  `‑‑logoB.png
     |   `‑‑pages
     |      `‑‑page.js
     ...

Then in your appA/pages/page.js, you can do something like

import Page from '../../common/pages/base‑page'

And in your webpack, the entry can be

module.exports = {
  entry: [
    './src/appA/index.js',
    './src/appB/index.js',
    // other apps
  ]
}

However I'm not sure if this is possible without ejecting create‑react‑app.

(by Sezer Egrek、Derek Nguyen)

參考文件

1. Is there a way to build multiple apps from single one with replacing some assets and components? (CC BY‑SA 2.5/3.0/4.0)