如何从网页和模板中引用 NPM 安装的库？答案

【问题标题】：How to refer NPM installed libraries from web pages and templates?如何从网页和模板中引用 NPM 安装的库？
【发布时间】：2017-11-16 07:57:56
【问题描述】：

我已经安装了，比如说，jQuery：

npm install jquery

现在我的网站有

ROOT/node_modules/jquery/*

子目录。

接下来要做什么？随便写

<script src="/node_modules/jquery/src/jquery.js"></script>

或者我可以采取一些措施将jquery.js 带出这条路径和/或以某种可移植的方式对引用进行编码？

例如，假设我正在使用 Jade 模板。我应该写吗

script(src="/node_modules/jquery/src/jquery.js")

【问题讨论】：

package page 提供了一些提示。您当然可以链接、符号链接或只是复制文件，但我想我们的想法是将其合并到您最喜欢的构建工具中并最终获得一些 /js/scripts.min.js?v123，您可以从 <script> 调用。

标签： javascript jquery node.js pug

【解决方案1】：

对您的问题的简短回答是：是的，您将它与您放置的相对路径一起使用

<script src="/node_modules/jquery/src/jquery.js"></script>

详细说明NPM的使用，有以下几个方面的帮助

将依赖项保留在代码之外。因此，在您的 git 存储库中，您可以忽略它们（节省空间和网络）。图书馆的更换也是在一个地方而不是在任何地方进行的。
您可以轻松地重新创建依赖项。如果您删除了依赖项或构建了新的 repo，您可以运行 npm install 并更新所有依赖项。
自动依赖关系管理 - 在一个包依赖于另一个包的情况下，如果它们被更新，则 nom 会自动管理所有依赖关系。

因此，总而言之，您无需管理外部包。

现在在我们的代码中，你可以通过以下方式使用它们

我们可以通过给出相对路径来引用每个库。这是一种直截了当的方法。
但是，如果您想提供别名根路径，您可以在 gulp 或 web pack 等构建器中通过变量来实现。
最好的方法是将它们捆绑为一个 js 文件，同时缩小它们并使用 bundle.js。例如，在 webpack 中，您可以在 webpack 配置中提及 vendor.bundle.js 等所有文件并运行一次。这将创建 vendor.bundle.js。你可以使用这个包而不是 jQuery。好处是，虽然 nom 在较低级别管理依赖模块，但您可以将它们捆绑到另一个 js 中，这将产生更小的单个文件，从而提高性能。

【讨论】：

【解决方案2】：

亲爱的，您在节点项目中使用的任何依赖项都必须在 Node_Modules 中，并且您必须从 Node_Module/dependency_path 指定依赖项路径，这在项目开发和生产中会更好。这可能对您有所帮助

【讨论】：

【解决方案3】：

如果您没有使用任何构建工具，那么您可以拥有一个脚本文件夹，您可以在其中手动复制所需的库。这样，您的源代码本身就是您最终将部署的构建。或者，如果你在做一个中型或大型项目，你可以采用更常见的方法，使用 webpack、gulp 或 browserify 等构建工具，它可以自动导入所有依赖项。 Webpack 非常适合大型项目，可以为您做很多事情：

可以将您的依赖项导入到文件块中
资产管理
缩小依赖项以减小大小
编译 compile-to-js 和 compile-to-css 语言，例如 typescript 和 sass
提供具有热重载功能的开发服务器
仅在运行时需要时才支持动态加载以下载部分 js

还有很多其他的。不过，它会为您的代码增加一点复杂性。

但对于小型项目，我认为最好手动添加库并保持简单

【讨论】：

【解决方案4】：

为了尽快回答您的问题：是的，您可以复制 jquery.js 并将其移动到您想要的任何文件夹中。然后，您必须更改脚本元素中的 src 属性，如下所示：

<script src="/new/path/jquery.js"></script>

但是，在生产情况下，您很可能希望加入所有 js 文件，然后只加载几个文件，如下所示：

<script src="/path/libs.js"></script>

libs.js 以正确的顺序包含我们所有的依赖项。

【讨论】：