如何包含位于 node_modules 文件夹中的脚本？

Question

我有一个关于将 node_modules 包含到 HTML 网站的最佳实践的问题。

想象一下，我的 node_modules 文件夹中有 Bootstrap。现在对于网站的生产版本，我将如何包含位于 node_modules 文件夹中的引导脚本和 CSS 文件？将 Bootstrap 留在该文件夹中并执行以下操作是否有意义？

 <script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>

或者我是否必须在我的 gulp 文件中添加规则，然后将这些文件复制到我的 dist 文件夹中？还是最好让 gulp 从我的 HTML 文件中完全删除本地引导程序并将其替换为 CDN 版本？

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常，您不希望将任何内部路径暴露给外部世界，以了解您的服务器的结构。您可以在您的服务器中创建一个 /scripts 静态路由，从它们碰巧驻留的任何目录中获取其文件。因此，如果您的文件位于 "./node_modules/bootstrap/dist/" 中。然后，您页面中的脚本标记如下所示：

 <script src="/scripts/bootstrap.min.js"></script>

如果你在 nodejs 中使用 express，静态路由就像这样简单：

 app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));

然后，来自 /scripts/xxx.js 的任何浏览器请求将自动从您的 dist 目录中的 __dirname + /node_modules/bootstrap/dist/xxx.js 。

注意：较新版本的 NPM 将更多内容放在顶层，没有嵌套那么深，因此如果您使用的是较新版本的 NPM，那么路径名称将与 OP 的问题和当前答案中指示的不同。但是，这个概念还是一样的。您找出文件在服务器驱动器上的物理位置，然后使用 — 创建一个 app.use() express.static() 以创建这些文件的伪路径，这样您就不会暴露实际的服务器文件系统组织给客户端。

---

如果您不想制作这样的静态路由，那么您最好将公共脚本复制到您的 Web 服务器确实视为 /scripts 或您想要的任何顶级名称的路径使用。通常，您可以将此复制作为构建/部署过程的一部分。

---

如果您只想在目录中公开一个特定文件，而不是在该目录中找到所有文件，那么您可以为每个文件手动创建单独的路由，而不是使用 express.static() 例如：

 <script src="/bootstrap.min.js"></script>

以及为此创建路线的代码

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

或者，如果您仍想使用 /scripts 为脚本描绘路线，您可以这样做：

 <script src="/scripts/bootstrap.min.js"></script>

以及为此创建路线的代码

app.get('/scripts/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

原文由 jfriend00 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我会使用路径 npm 模块，然后执行如下操作：

 var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));

重要提示： 我们使用 path.join 以系统不可知的方式加入路径，即在 windows 和 unix 上我们有不同的路径分隔符（/ 和 \）

原文由 Alexander Egorov 发布，翻译遵循 CC BY-SA 4.0 许可协议