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

Question

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

想象一下,我的node_modules文件夹中有Bootstrap .现在,对于网站的分发版本(实时版本),我如何包含位于node_modules文件夹内的Bootstrap脚本和CSS文件？将Bootstrap放在该文件夹中并执行以下操作是否有意义？

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

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

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()with 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');
});

Answer 2

我会使用路径npm模块,然后执行以下操作:

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

Answer 3

正如jfriend00所提到的,您不应该暴露您的服务器结构.您可以将项目依赖项文件复制到类似的位置public/scripts.您可以使用dep-linker 轻松完成此操作:

var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done

Answer 4

目录“ node_modules”可能不在当前目录中，因此您应动态解析路径。

var bootstrap_dir = require.resolve('bootstrap')
                           .match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));

Answer 5

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

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

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

Answer 6

如果您想要快速简便的解决方案（并且已安装gulp）。

在我中，gulpfile.js我运行一个简单的复制粘贴任务，该任务将我可能需要的所有文件放入./public/modules/目录中。

gulp.task('modules', function() {
    sources = [
      './node_modules/prismjs/prism.js',
      './node_modules/prismjs/themes/prism-dark.css',
    ]
    gulp.src( sources ).pipe(gulp.dest('./public/modules/'));
});

gulp.task('copy-modules', ['modules']);

不利的一面是它不是自动化的。但是，如果您只需要复制一些脚本和样式（并保存在列表中），就可以完成此工作。

Answer 7

这是我在我的express服务器上设置的：

// 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>

祝你好运...