一个项目包含多个package.json文件 [英] One project with multiple package.json files

问题描述

我对现代JS开发比较陌生，因此我需要有关这种情况的帮助或建议.

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

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

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.

要求:通过为每个内部版本使用不同的程序包和/或配置文件，减少浏览器版本之间的项目维护.

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

问题:到目前为止，根据我所做的研究，似乎无法通过选定的工具(npm，Webpack，React，Redux，Typescript)在同一项目中使用不同的package.json文件和node_modules文件夹. Yarn似乎支持多个package.json文件，但我们希望尽可能避免从npm迁移.

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.

当前项目结构:

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

我认为可能有用的方法是在其package.json和node_modules文件夹中引入IE8子文件夹，然后以某种方式引用该文件夹以进行构建任务，但是现在我忘了如何告诉npm在构建时对其进行引用.

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.

拟议的项目结构:

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

我尝试了在Web上找到的其他内容，包括resolve.modules: [__dirname + "/ie8/node_modules"]，但似乎不起作用，或者我误解了它的作用，因为在多个文件上出现了Cannot find name 'require'错误，并且终端输出中引用了Typescript 2.8.3. 2.3.4.没有它，项目将使用IE11的配置进行构建.

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.

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

So, can anybody tell me with certainty it's not possible or offer some guidance? This is 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?

谢谢.

推荐答案

好，所以经过更多研究后，我偶然发现 Lerna 基本上可以让我做自己想做的事情(到目前为止，我所看到的).它需要特定的项目树设置，如下所示:

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

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中，我根据全局变量指定了用于不同版本的命令:

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

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版本.在整个项目更改为该模型之后，我将不得不查看这种方法会出现什么问题.

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.

在webpack.config.js中，我配置了两个导出-一个用于现代，一个用于传统.每个都指向一个不同的入口index.jsx文件，使用webpack.DefinePlugin将全局变量设置为旧版"或现代"，并指定要解析的通用组件模块的路径:['node_modules', path.resolve(__dirname, 'components')]

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看起来像这样:

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

{
        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! :)

这篇关于一个项目包含多个package.json文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！