如何包括位于node_modules文件夹内的脚本?

我有一个关于将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版本?

当前回答

我想用一个更简单的解决方案来更新这个问题。创建到node_modules的符号链接。

授予node_modules公共访问权的最简单方法是从公共目录中创建一个指向node_modules的符号链接。符号链接将使文件存在于创建链接的任何地方。

例如，如果节点服务器有提供静态文件的代码

app.use(serveStatic(path.join(__dirname, 'dist')));

而__dirname指向/path/to/app，这样你的静态文件就会从/path/to/app/dist

node_modules位于/path/to/app/node_modules，然后在mac/linux上创建一个这样的符号链接:

ln -s /path/to/app/node_modules /path/to/app/dist/node_modules

或者像这样在窗户上:

mklink /path/to/app/node_modules /path/to/app/dist/node_modules

现在一个get请求:

node_modules/some/path

是否会收到文件的响应

/path/to/app/dist/node_modules/some/path

哪个才是真正的文件

/path/to/app/node_modules/some/path

如果你在/path/to/app/dist的目录不是一个安全的位置，可能是因为gulp或grunt构建过程的干扰，那么你可以为链接添加一个单独的目录，并添加一个新的serveStatic调用，例如:

ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules

在节点中添加:

app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));

2016-06-12 08:41:48

其他回答

我会使用path npm模块，然后做这样的事情:

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

重点:我们使用路径。使用系统不可知的方式使路径连接，即在Windows和Unix中，我们有不同的路径分隔符(/和\)

2015-04-16 09:51:12

我没有找到任何干净的解决方案(我不想暴露所有node_modules的源代码)，所以我只是写了一个Powershell脚本来复制它们:

$deps = "leaflet", "leaflet-search", "material-components-web"

foreach ($dep in $deps) {
    Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse
}

2017-07-01 17:40:48

这是我在我的快速服务器上设置的:

// app.js
const path = require('path');
const express = require('express');
const expressApp  = express();
const nm_dependencies = ['bootstrap', 'jquery', 'popper.js']; // keep adding required node_modules to this array.
nm_dependencies.forEach(dep => {
  expressApp.use(`/${dep}`, express.static(path.resolve(`node_modules/${dep}`)));
});

<!-- somewhere inside head tag -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />

<!-- somewhere near ending body tag -->
<script src="jquery/dist/jquery.js" charset="utf-8"></script>
<script src="popper.js/dist/popper.js" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>

祝你好运…

2019-04-16 04:53:07

通常，您不希望向外部世界公开任何关于服务器结构的内部路径。你所能做的就是在服务器中创建一个/scripts静态路由，从文件所在的目录中获取文件。如果你的文件在"。/node_modules/bootstrap/dist/"目录下。然后，页面中的script标签看起来就像这样:

<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中获取。

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或任何你想使用的顶级名称的路径。通常，您可以将此复制作为构建/部署过程的一部分。

如果你想在一个目录中只公开一个特定的文件，而不是在该目录中找到的所有文件，那么你可以手动为每个文件创建单独的路由，而不是使用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>