我错过了什么(第一次使用 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
,或更准确地说 npm
,yarn
用作模块存储库的工作方式。
它实际上并不只安装库。它安装发布的整个包。通常,发布者不会努力在发布的版本中省略一些文件,您基本上可以获得整个存储库。这包括预期的库文件,以及文档、原始源代码、测试等。
这就是为什么这张关于 node_modules
的图片对于那些在生活中的某个时刻不得不使用 npm
的人来说很有趣:
回答你的问题:不,你没有用错。它正在按预期工作,尽管看起来很奇怪。
如果您只需要特定文件,最好的办法是使用 yarn
安装,然后将文件复制过来。但请注意,如果您更新包版本,您的文件的目的地可能会改变,所以请记住这一点。
Marko 的描述(以及那张很棒的图表)对正在发生的事情给出了很好的解释。要回答有关解决它的问题,从 Gulp 到 WebPack 有一系列令人眼花缭乱的潜在选项。
然而,对于像复制几个 javascript 库这样简单的事情,我建议使用 ASP.NET 中已经包含了相当长一段时间的基本 BuildBundlerMinifier
。
默认 ASP.NET Core 2.0 模板包括开箱即用的部分支持,但您确实需要对项目进行一些更改才能使其正常运行:
在您的 .csproj
文件中,您需要为 BuildBundlerMinifier
添加包参考。您将把它添加到与 Microsoft.AspNetCore.All
的引用相同的 <ItemGroup>
中。这将启用捆绑器并使其在构建期间启动。
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" />
<PackageReference Include="BuildBundlerMinifier" Version="2.6.362" />
</ItemGroup>
正如我提到的,标准模板对捆绑器有部分支持。我的意思是它默认在项目的根目录中包含一个 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.js
从 node_modules/jquery/dist/
复制到 root/scripts/
。
如果您使用的是 Yarn,我也强烈推荐 Yarn.MSBuild
库。此包使 MSBuild 能够在构建期间自动检索您的 Yarn 包。与捆绑器结合使用时,这可确保您每次构建时都在 /scripts
文件夹中拥有最新的包副本。
所以我只是尝试使用 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
,或更准确地说 npm
,yarn
用作模块存储库的工作方式。
它实际上并不只安装库。它安装发布的整个包。通常,发布者不会努力在发布的版本中省略一些文件,您基本上可以获得整个存储库。这包括预期的库文件,以及文档、原始源代码、测试等。
这就是为什么这张关于 node_modules
的图片对于那些在生活中的某个时刻不得不使用 npm
的人来说很有趣:
回答你的问题:不,你没有用错。它正在按预期工作,尽管看起来很奇怪。
如果您只需要特定文件,最好的办法是使用 yarn
安装,然后将文件复制过来。但请注意,如果您更新包版本,您的文件的目的地可能会改变,所以请记住这一点。
Marko 的描述(以及那张很棒的图表)对正在发生的事情给出了很好的解释。要回答有关解决它的问题,从 Gulp 到 WebPack 有一系列令人眼花缭乱的潜在选项。
然而,对于像复制几个 javascript 库这样简单的事情,我建议使用 ASP.NET 中已经包含了相当长一段时间的基本 BuildBundlerMinifier
。
默认 ASP.NET Core 2.0 模板包括开箱即用的部分支持,但您确实需要对项目进行一些更改才能使其正常运行:
在您的
.csproj
文件中,您需要为BuildBundlerMinifier
添加包参考。您将把它添加到与Microsoft.AspNetCore.All
的引用相同的<ItemGroup>
中。这将启用捆绑器并使其在构建期间启动。<ItemGroup> <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" /> <PackageReference Include="BuildBundlerMinifier" Version="2.6.362" /> </ItemGroup>
正如我提到的,标准模板对捆绑器有部分支持。我的意思是它默认在项目的根目录中包含一个
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.js
从 node_modules/jquery/dist/
复制到 root/scripts/
。
如果您使用的是 Yarn,我也强烈推荐 Yarn.MSBuild
库。此包使 MSBuild 能够在构建期间自动检索您的 Yarn 包。与捆绑器结合使用时,这可确保您每次构建时都在 /scripts
文件夹中拥有最新的包副本。