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

Z时代
2024-01-10
分类：问答

我是现代JS开发的新手，因此我需要有关此情况的帮助或建议。

我们有一个支持IE8（React 0.14）的React-Typescript-Redux项目。现在我们要升级到IE11和React

16，但应该支持IE8。

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

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

当前项目结构：

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在构建时对其进行引用。

拟议项目结构：

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的配置进行构建。

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

提前致谢。

回答：

好的，因此在进行了更多研究之后，我偶然发现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将全局变量设置为“旧版”或“现代”，并指定要解析的通用组件模块的路径：['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/
                }
            ]
        }  
    }