一個項目有多個 package.json 文件

Question

我對現代 JS 開發比較陌生，我需要關於我所處的這種情況的幫助或建議。

情況：我們有一個支持 IE8 (React 0.14) 的 React-Typescript-Redux 項目。 現在我們正在升級到 IE11 和 React 16，但應該支持 IE8。

要求：通過為每個構建使用不同的包和/或配置文件，減少瀏覽器版本之間的項目維護。

問題：從我目前所做的研究來看，在同一個項目中使用不同的 package.json 文件和 node_modules 文件夾似乎不可能使用選定的工具：npm、Webpack、React、Redux、Typescript。 Yarn 似乎支持多個 package.json 文件，但我們希望盡可能避免從 npm 遷移。

當前項目結構：

project_root/
  node_modules/
  src/
    components/
    utils/
    index.tsx
    components.css
  index.html
  package.json
  tsconfig.json
  webpack.config.json

我認為可能有效的是引入 IE8 子文件夾及其 package.json 和 node_modules 文件夾，然后以某種方式引用該文件夾以進行構建任務，但現在我不知道如何告訴 npm 在構建時引用它。

建議的項目結構：

project_root/
  ie8/
   node_modules/
   package.json
  node_modules/
  src/
    components/
    utils/
    index.tsx
    components.css
  index.html
  package.json
  tsconfig.json
  webpack.config.json

我嘗試了在網上找到的不同的東西，包括resolve.modules: [__dirname + "/ie8/node_modules"]但它似乎不起作用或者我誤解了它的作用，因為我在幾個文件上遇到了Cannot find name 'require'錯誤終端輸出中引用了 Typescript 2.8.3 而不是 2.3.4。 沒有它，項目將使用 IE11 的配置構建。

那么，有人可以肯定地告訴我這是不可能的或提供一些指導嗎？ 這是迄今為止我找到的最接近的答案，但聽起來不是最終答案。 或者，這樣的項目結構是否可以支持所需的內容或將項目分成兩個是最好的選擇？

提前致謝。

Answer 1

好的，所以經過一些更多的研究后，我偶然發現了Lerna ，它主要允許我做我想做的事情（從我目前看到的情況來看）。 它需要特定的項目樹設置，如下所示：

project_root/
  node_modules/
  packages/
    components/ // Components shared between projects
      components/
       MyComponent.jsx
      index.jsx

  legacy/
     output/
      build.js // React 0.14 build
     node_modules/
     package.json // project specific dependencies
     index.jsx // project specific entry
     .babelrc

  modern/
     output/
      build.js // React 16 build
     node_modules/
     package.json // project specific dependencies
     index.jsx // project specific entry
     .babelrc

  package.json // contains devDependencies shared between projects
  lerna.json
  webpack.config.js
  index.html

然后，在 components/index.jsx 中，我根據全局變量為不同版本指定了 require 命令：

if(PROJECT_SRC == "legacy"){
    React = require('../legacy/node_modules/react');
    ReactDOM = require('../legacy/node_modules/react-dom');
} else {
    React = require('../modern/node_modules/react');
    ReactDOM = require('../modern/node_modules/react-dom');
}

注意：這可能是不好的做法，但目前我可以在構建中包含不同的 React 版本的唯一方法。 在整個項目更改為該模型后，我將不得不看看這種方法會出現什么問題。

在 webpack.config.js 中，我配置了兩個導出 - 一個用於現代，一個用於遺留。 每個指向不同的入口 index.jsx 文件，使用 webpack.DefinePlugin 將全局變量設置為“legacy”或“modern”，並指定要解析的公共組件模塊的路徑： ['node_modules', path.resolve(__dirname, 'components')]

單個項目輸出的 webpack.config 看起來像這樣：

{
        entry: "./packages/legacy/index.jsx",
        target: "web", 
        output: 
        {
            filename: "build.js",
            path: __dirname + "/packages/legacy/dist/",
            libraryTarget: "var",
            library: "lib_name"
        },
        devtool: "source-map",
        resolve: {
            extensions: [".js", ".jsx", ".json"],
            modules: ['node_modules', path.resolve(__dirname, 'components')]
        },
        plugins: plugins_legacy,
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    loader: "babel-loader",
                    exclude: /node_modules/
                }
            ]
        }  
    }

隨時發表評論或指出問題，但我希望這會在將來對某人有所幫助！ :)