我有一个关于将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版本?
当前回答
正如jfriend00提到的，你不应该公开你的服务器结构。您可以将项目依赖文件复制到公共/脚本之类的文件中。你可以用dep-linker很容易做到这一点，像这样:
var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done
其他回答
这是我在我的快速服务器上设置的:
// 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>
祝你好运…
如果你要链接很多文件，创建一个白名单，然后使用sendFile():
app.get('/npm/:pkg/:file', (req, res) => {
const ok = ['jquery','bootstrap','interactjs'];
if (!ok.includes(req.params.pkg)) res.status(503).send("Not Permitted.");
res.sendFile(__dirname + `/node_modules/${req.params.pkg}/dist/${req.params.file}`);
});
例如，你可以安全地链接到/npm/bootstrap/ bootstrap .js， /npm/bootstrap/ bootstrap .css等等。
顺便说一句，我很想知道是否有一种方法可以使用express.static来加入白名单
目录'node_modules'可能不在当前目录中，所以你应该动态解析路径。
var bootstrap_dir = require.resolve('bootstrap')
.match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));
正如jfriend00提到的，你不应该公开你的服务器结构。您可以将项目依赖文件复制到公共/脚本之类的文件中。你可以用dep-linker很容易做到这一点，像这样:
var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done
我想用一个更简单的解决方案来更新这个问题。创建到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')));
