我错过了什么(第一次使用 Yarn + JQuery)

What am I missing (first time Yarn user + JQuery)

所以我只是尝试使用 Yarn 将 JQuery 运行time 添加到 .NET Core 网站项目中。

我运行在项目文件夹中的命令是:

  yarn add jquery --modules-folder ./root/scripts

它确实添加了 jQuery(到指定的子文件夹),但它添加的方式比我预期的要多。使用 Nuget 我会得到:

  jquery-3.3.1.js
  jquery-3.3.1.min.js
  jquery-3.3.1.min.map

即使 Nuget 不会将文件添加为站点内容(尽管我可以 xcopy 它们),但我会得到我需要的。但是使用 Yarn,我得到的似乎是一个完整的源存储库:

总共有 123 个文件(dist 中的文件甚至没有标记版本号)。

这是预期的结果吗……我是不是用错了 Yarn(概念上)?

我是否应该将构建 JQuery 作为项目的一部分,而不是仅仅包含和使用它?

这就是 yarn,或更准确地说 npmyarn 用作模块存储库的工作方式。

它实际上并不只安装库。它安装发布的整个包。通常,发布者不会努力在发布的版本中省略一些文件,您基本上可以获得整个存储库。这包括预期的库文件,以及文档、原始源代码、测试等。

这就是为什么这张关于 node_modules 的图片对于那些在生活中的某个时刻不得不使用 npm 的人来说很有趣:

回答你的问题:不,你没有用错。它正在按预期工作,尽管看起来很奇怪。

如果您只需要特定文件,最好的办法是使用 yarn 安装,然后将文件复制过来。但请注意,如果您更新包版本,您的文件的目的地可能会改变,所以请记住这一点。

Marko 的描述(以及那张很棒的图表)对正在发生的事情给出了很好的解释。要回答有关解决它的问题,从 Gulp 到 WebPack 有一系列令人眼花缭乱的潜在选项。

然而,对于像复制几个 javascript 库这样简单的事情,我建议使用 ASP.NET 中已经包含了相当长一段时间的基本 BuildBundlerMinifier

默认 ASP.NET Core 2.0 模板包括开箱即用的部分支持,但您确实需要对项目进行一些更改才能使其正常运行:

  1. 在您的 .csproj 文件中,您需要为 BuildBundlerMinifier 添加包参考。您将把它添加到与 Microsoft.AspNetCore.All 的引用相同的 <ItemGroup> 中。这将启用捆绑器并使其在构建期间启动。

    <ItemGroup>
      <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" />
      <PackageReference Include="BuildBundlerMinifier" Version="2.6.362" />
    </ItemGroup>
    
  2. 正如我提到的,标准模板对捆绑器有部分支持。我的意思是它默认在项目的根目录中包含一个 bundleconfig.json 文件。该文件配置捆绑器接触哪些文件。如果您要查找的只是 jquery-3.3.1.min.js,那么您的文件应该如下所示:

    [
      {
        "outputFileName": "root/scripts/jquery.min.js",
        "inputFiles": [
          "node_modules/jquery/dist/jquery.min.js"
        ],
        "minify": {
          "enabled": false
        }
      }
    ]
    

这里的最终结果是每次构建项目时,打包器都会自动将 jquery.min.jsnode_modules/jquery/dist/ 复制到 root/scripts/

如果您使用的是 Yarn,我也强烈推荐 Yarn.MSBuild 库。此包使 MSBuild 能够在构建期间自动检索您的 Yarn 包。与捆绑器结合使用时,这可确保您每次构建时都在 /scripts 文件夹中拥有最新的包副本。