typescript 一个项目有多个 package.json 文件

One project with multiple package.json files

提问by skrunic

I'm relatively new to modern JS development and I need help or advice about this situation I'm in.

我对现代 JS 开发比较陌生，我需要关于我所处的这种情况的帮助或建议。

Situation:We have a React-Typescript-Redux project supporting IE8 (React 0.14). Now we're upgrading to IE11 and React 16 but IE8 should be supported.

情况：我们有一个支持 IE8 (React 0.14) 的 React-Typescript-Redux 项目。现在我们正在升级到 IE11 和 React 16，但应该支持 IE8。

Requirement:Reduce project maintenance between browser versions by using different packages and/ or config files for each build.

要求：通过为每个构建使用不同的包和/或配置文件来减少浏览器版本之间的项目维护。

Problem:From research I made so far it seems impossible to use different package.json files and node_modules folders inside the same project with selected tools: npm, Webpack, React, Redux, Typescript. Yarn seems to support multiple package.json files but we'd like to avoid migrating from npm if possible.

问题：从我目前所做的研究来看，在同一个项目中使用不同的 package.json 文件和 node_modules 文件夹似乎不可能使用选定的工具：npm、Webpack、React、Redux、Typescript。Yarn 似乎支持多个 package.json 文件，但我们希望尽可能避免从 npm 迁移。

Current project structure:

当前项目结构：

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

What I thought might work was to introduce IE8 subfolder with its package.json and node_modules folder and then reference that folder for the build task somehow but now I'm oblivious how to tell npm to reference it on build.

我认为可能有效的是引入 IE8 子文件夹及其 package.json 和 node_modules 文件夹，然后以某种方式引用该文件夹以进行构建任务，但现在我不知道如何告诉 npm 在构建时引用它。

Proposed project structure:

建议的项目结构：

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

I tried different things found on web, including resolve.modules: [__dirname + "/ie8/node_modules"]but it seems it doesn't work or I misunderstand what it does because I get Cannot find name 'require'errors on several files and Typescript 2.8.3 is referenced in terminal output instead 2.3.4. Without it, project builds with configuration for IE11.

我尝试了在网络上找到的不同东西，包括resolve.modules: [__dirname + "/ie8/node_modules"]但它似乎不起作用或者我误解了它的作用，因为我Cannot find name 'require'在几个文件上出错，并且在终端输出中引用了 Typescript 2.8.3 而不是 2.3.4。没有它，项目将使用 IE11 的配置构建。

So, can anybody tell me with certainty it's not possible or offer some guidance? Thisis the closest answer I found so far but doesn't sound final. Alternatively, can project structure like this support what is required or separating project into two is the best bet?

那么，有人可以肯定地告诉我这是不可能的或提供一些指导吗？这是迄今为止我找到的最接近的答案，但听起来不是最终答案。或者，像这样的项目结构是否可以支持所需的内容或将项目分成两个是最好的选择？

Thanks in advance.

提前致谢。

回答by skrunic

OK, so after some more research I stumbled upon Lernawhich mostly allows me to do what I wanted (from what I've seen so far). It requires specific project tree setup, like this:

好的，所以经过一些更多的研究后，我偶然发现了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

Then, in components/index.jsx I specified require commands for different versions based on global variable:

然后，在 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');
}

Note: This is probably bad practice but the only way at the moment I could include different React versions in the build. I'll have to see what problems arise with this approach after the whole project changes to this model.

注意：这可能是不好的做法，但目前我可以在构建中包含不同的 React 版本的唯一方法。在整个项目更改为该模型后，我将不得不看看这种方法会出现什么问题。

In webpack.config.js I configured two exports - one for modern and one for legacy. Each points to a different entry index.jsx file, uses webpack.DefinePlugin to set global variable to "legacy" or "modern", and specifies path to common components module to resolve: ['node_modules', path.resolve(__dirname, 'components')]

在 webpack.config.js 中，我配置了两个导出 - 一个用于现代，一个用于遗留。每个指向不同的入口 index.jsx 文件，使用 webpack.DefinePlugin 将全局变量设置为“legacy”或“modern”，并指定通用组件模块的路径来解析：['node_modules', path.resolve(__dirname, 'components')]

webpack.config for a single project output looks something like this:

单个项目输出的 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/
                }
            ]
        }  
    }

Feel free to comment or point to problems but I hope this will help somebody in the future! :)

随时发表评论或指出问题，但我希望这会在将来对某人有所帮助！:)