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

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

通常，您不希望向外界公开服务器内部结构的任何内部路径。您可以做的是/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');
});

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

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

重要提示：我们使用path.join来使用系统不可知的方式进行路径连接，即在Windows和Unix上，我们使用不同的路径分隔符（/和）

如jfriend00所述，您不应公开服务器结构。您可以将项目依赖项文件复制到public/scripts。您可以使用dep-linker 轻松完成此操作，如下所示：

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

如果您想要一个快速简便的解决方案（并且已安装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']);

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

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

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

我想用一个更简单的解决方案来更新这个问题。创建到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

或在Windows上这样：

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

现在获取以下请求：

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')));

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

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

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

我进行了以下更改，以自动将索引html中的文件包含在内。这样，当您在文件夹中添加文件时，它将自动从文件夹中拾取文件，而无需在index.html中包含文件

//// THIS WORKS FOR ME 
///// in app.js or server.js

var app = express();

app.use("/", express.static(__dirname));
var fs = require("fs"),

function getFiles (dir, files_){
    files_ = files_ || [];
    var files = fs.readdirSync(dir);
    for (var i in files){
        var name = dir + '/' + files[i];
        if (fs.statSync(name).isDirectory()){
            getFiles(name, files_);
        } else {
            files_.push(name);
        }
    }
    return files_;
}
//// send the files in js folder as variable/array 
ejs = require('ejs');

res.render('index', {
    'something':'something'...........
    jsfiles: jsfiles,
});

///--------------------------------------------------

///////// in views/index.ejs --- the below code will list the files in index.ejs

<% for(var i=0; i < jsfiles.length; i++) { %>
   <script src="<%= jsfiles[i] %>"></script>
<% } %>

这是我在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>

祝好运...