一个包含多个package.json文件的项目

Question

我对现代JS开发相对较新,我需要有关这种情况的帮助或建议.

情况:我们有一个支持IE8的React-Typescript-Redux项目(React 0.14).现在我们升级到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/
                }
            ]
        }  
    }

随意评论或指出问题,但我希望这将有助于未来的人!:)