如何包含位于 node_modules 文件夹内的脚本? [英] How to include scripts located inside the node_modules folder?

问题描述

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

I have a question concerning best practice for including node_modules into a HTML website.

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

Imagine I have Bootstrap inside my node_modules folder. Now for the production version of the website, how would I include the Bootstrap script and CSS files located inside the node_modules folder? Does it make sense to leave Bootstrap inside that folder and do something like the following?

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

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

Or would I have to add rules to my gulp file which then copy those files into my dist folder? Or would it be best to let gulp somehow completely remove the local bootstrap from my HTML file and replace it with the CDN version?

推荐答案

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

Usually, you don't want to expose any of your internal paths for how your server is structured to the outside world. What you can is make a /scripts static route in your server that fetches its files from whatever directory they happen to reside in. So, if your files are in "./node_modules/bootstrap/dist/". Then, the script tag in your pages just looks like this:

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

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

If you were using express with nodejs, a static route is as simple as this:

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

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

Then, any browser requests from /scripts/xxx.js will automatically be fetched from your dist directory at __dirname + /node_modules/bootstrap/dist/xxx.js.

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

Note: Newer versions of NPM put more things at the top level, not nested so deep so if you are using a newer version of NPM, then the path names will be different than indicated in the OP's question and in the current answer. But, the concept is still the same. You find out where the files are physically located on your server drive and you make an app.use() with express.static() to make a pseudo-path to those files so you aren't exposing the actual server file system organization to the client.

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

If you don't want to make a static route like this, then you're probably better off just copying the public scripts to a path that your web server does treat as /scripts or whatever top level designation you want to use. Usually, you can make this copying part of your build/deployment process.

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

If you want to make just one particular file public in a directory and not everything found in that directory with it, then you can manually create individual routes for each file rather than use express.static() such as:

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

以及为此创建路由的代码

And the code to create a route for that

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

或者，如果你仍然想用 /scripts 描述脚本的路由，你可以这样做:

Or, if you want to still delineate routes for scripts with /scripts, you could do this:

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

以及为此创建路由的代码

And the code to create a route for that

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

这篇关于如何包含位于 node_modules 文件夹内的脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！