如何使用npm安装多个版本的包

Question

由于https://github.com/npm/npm/issues/2943,npm将永远不会支持别名包和安装同一包的多个版本的能力.

在github问题上发布的变通方法可能适用于纯JS模块,但随着npm成为前端包管理的标准,包现在包括各种资产,如CSS.

有没有解决方法来安装同一个包的多个版本？

我想出的最好的想法是"克隆"一个包,并用一个稍微不同的名称发布它.

例如,如果你需要的多个版本jquery,你可以只包发布所谓jquery-alias1,jquery-alias2,jquery-alias3等,然后在你的设置适当的版本package.json.

或者你可以根据自己的版本号,比如命名的包jquery-1.11.x,jquery-2.1.x等等.

但这两种方法看起来都很草率.还有更好的吗？

Answer 1

我想在这里发帖给像我这样使用Yarn并降落在这里的人.它是或多或少的直接替代NPM,支持开箱即用的混叠:

yarn add material-ui@latest
yarn add material-ui-next@npm:material-ui@next
then

import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from 'material-ui-next/Button'; // v1.x

(例如,信用卡访问https://github.com/callemall/material-ui/issues/7195#issuecomment-314547601)

Answer 2

从npm v6.9.0开始， npm现在支持软件包别名。它实现了与 Yarn 相同的语法：

npm install jquery2@npm:jquery@2
npm install jquery3@npm:jquery@3

这会将以下内容添加到package.json：

"dependencies": {
   "jquery2": "npm:jquery@^2.2.4",
   "jquery3": "npm:jquery@^3.4.1"
}

也可以使用这种语法直接从Github安装。例如，如果要安装软件包的npm注册表版本和Github分支foobar：

npm install foobar
npm install foobar-fork@github:username/foobar

Answer 3

听起来“ JSPM”可能正是您要寻找的工具。JSPM建立在NPM之上，但允许您从多个来源（github，npm等）提取软件包。它使用前端的System.js通用模块加载器来加载模块，并“使用简单的版本管理将其下载到带有版本后缀的文件夹中”，这很容易理解。

jspm.io

使用jspm安装软件包时，可以将该软件包别名为特定名称，以后可以require在模块中专门指定该名称。

$ jspm install jquery
... (status msgs) ...
ok   Installed jquery as github:components/jquery@^2.1.4 (2.1.4)

$ jspm install jqueryOne=jquery@1.11.3
... (status msgs) ...
ok   Installed jqueryOne as github:components/jquery@1.11.3 (1.11.3)

      github:components/jquery 1.11.3 2.1.4

然后在您的js中，您可以简单地require(jquery)和/或require(jqueryOne)根据需要进行操作，并允许您根据需要来回移动。

对于要使用其多个版本的任何软件包，这都是相同的。

Answer 4

我不是 npm 方面的专家，但我遇到了以下问题：两个依赖项竞争一个版本。我举个例子，对于初学者来说很难理解。

我在 package.json 中定义了以下两个依赖项：

"@ngtools/webpack": "^13.2.2",    
"angular-named-lazy-chunks-webpack-plugin": "^2.1.0",

他们都需要一个版本的 webpack，但是是不同的版本。他们正在竞争。您的评论和解决方案对我很有帮助，因为我在 devDependency 中定义了以下内容：

"webpack5": "npm:webpack@^5.68.0",
"webpack4": "npm:webpack@^4.46.0",

现在，“@ngtools/webpack”和“angular-named-lazy-chunks-webpack-plugin”都很高兴。webpack5 和 webpack4 的名称是随机的。我想你可以放任何你喜欢的东西。

错误是：

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: openpaas-ssp@0.0.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.46.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.30.0" from @ngtools/webpack@13.2.2
npm ERR! node_modules/@ngtools/webpack
npm ERR!   dev @ngtools/webpack@"^13.2.2" from the root project

当我为 webpack 设置 5.30 时，“@ngtools/webpack”很满意，但我从“angular-named-lazy-chunks-webpack-plugin”中得到了类似的错误