使用 Gulp/Yarn 分离前端和后端依赖项答案

【问题标题】：Separating Frontend & Backend Dependencies with Gulp/Yarn使用 Gulp/Yarn 分离前端和后端依赖项
【发布时间】：2020-04-23 07:38:02
【问题描述】：

我想使用yarn 而不是bower + npm。 Yarn 使用 package.json 并且不区分前端包和后端包。

到目前为止，我读到我需要用 gulp 分离我的前端 + 后端依赖项： How to use one package manager for backend and frontend? (Yarn/NPM)

我的应用使用 MEAN 堆栈。目前，我正在使用例如wiredep 将所有前端依赖项注入我的index.html。

问题：如何在构建过程中自动将前端依赖项与后端依赖项分开？/是否有任何选项可以使用 yarn 指定前端/后端包？

【问题讨论】：

没有办法将它们分开，因为 Yarn 不知道“前端”和“后端”，在这方面它与 NPM 并没有真正的区别。只要您在前端应用程序中明确列出包，就没有将它们分开的冲动，例如与进口。即使这样，将前端和后端保持为不同的项目也是有意义的，例如他们可能需要不同的软件包版本。除了前端构建应该复制到后端public之外，它们通常没有任何共同点。
这如何与嵌套依赖项一起工作？到目前为止，我只看到它们与我的后端依赖关系而不是前端，但我想有一些。手动定义它们似乎需要付出很多努力。我希望有一个工具可以扫描我的角度依赖并将依赖项自动复制/移动到新文件夹中。然后我可以使用wiredep再次注入依赖项。
目前我看到的最合理的解决方案是将fe/be分成两个项目，每个项目都有自己的package.json
这就是通常的做法。有时我有 3 个项目，一个公共项目同时托管 f/e 和 b/e 项目，只是为了包含它们共同的代码和构建它们的构建/部署脚本。

标签： node.js gulp yarnpkg

【解决方案1】：

让我介绍一下handpick，它可以让您定位和过滤多个依赖项。我写这篇文章是为了加快 CI 阶段，这些阶段只需要 devDependencies 的一部分，但最终会有更多的用例。这个项目是相当实验性的 - 请留下一些反馈。

安装

在您的系统上安装：

npm install handpick --global

用法

运行命令：

handpick [options]

-V, --version
-T, --target
-F, --filter
-M, --manager
-P, --path
-h, --help

示例

在package.json文件中定义非官方依赖：

{
    "lintDependencies":
    {
        "eslint": "6.8.0",
        "eslint-config-redaxmedia": "2.0.0"
    },
    "testDependencies":
    {
        "chai": "4.2.0",
        "mocha": "7.1.1"
    }
}

安装lintDependencies:

handpick --target=lintDependencies

通过 YARN 安装 devDependencies 和 lintDependencies：

handpick --target=devDependencies --target=lintDependencies --manager=yarn

在没有testDependencies的情况下安装devDependencies：

handpick --target=devDependencies --filter=testDependencies

在路径中安装dependencies 和devDependencies：

handpick --path=../shared

【讨论】：