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

Posted 2023-02-23

我有一个关于将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')));

另一答案

正如jfriend00所提到的，您不应该暴露您的服务器结构。您可以将项目依赖项文件复制到public/scripts之类的文件中。你可以用dep-linker这样轻松地做到这一点：

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

另一答案

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

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

另一答案

如果您想要一个快速简便的解决方案（并且您安装了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的符号链接。

授予对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

另一答案

我对AUTO-INCLUDE索引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>

祝好运...