如何包含位于node_modules文件夹内的脚本？
我有一个关于将node_modules包含到HTML网站的最佳实践的问题。 想象一下，我有我的node_modules文件夹中的Bootstrap。 现在对于网站的分发版本（实时版本），我将如何包含位于node_modules文件夹内的Bootstrap脚本和CSS文件？ 将Bootstrap放在该文件夹中并执行诸如<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script> ？是否有意义？ 或者，我将不得不添加规则到我的吞噬文件，然后将这些文件复制到我的dist文件夹？ 或者，最好是让吞噬完全从我的HTML文件中删除本地引导，并将其replace为CDN版本？
通常，你不想公开你的内部path来了解你的服务器是如何构build到外部世界的。 你可以在你的服务器上创build一个静态路由，从它所在的目录中获取它的文件。所以，如果你的文件在"./node_modules/bootstrap/dist/" 。 然后，页面中的脚本标签看起来像这样：
<script src="/scripts/bootstrap.min.js"></script>
如果你使用express和nodejs，静态路由就像这样简单：
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
然后，来自/scripts/xxx.js任何浏览器请求将自动从您的dist目录中获取。
注意：较新版本的NPM在顶层放置了更多的东西，而不是嵌套如此之深，所以如果您使用的是新版本的NPM，那么path名称将与OP的问题和当前答案中所示的不同。 但是，这个概念还是一样的。 您可以找出文件位于服务器驱动器上的物理位置，然后使用express.static()创buildapp.use() express.static()来为这些文件创build一个伪path，以便您不将实际的服务器文件系统组织客户端。
如果你不想这样做一个静态路由，那么你最好把公共脚本复制到一个你的Web服务器认为是/scripts或者你想要使用的顶级名称的path上。 通常，你可以使这个复制部分的构build/部署过程。
我会使用pathnpm模块，然后做这样的事情：
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”可能不在当前目录中，所以你应该dynamic地parsingpath。
var bootstrap_dir = require.resolve('bootstrap') .match(/.*\/node_modules\/[^/]+\//)[0]; app.use('/scripts', express.static(bootstrap_dir + 'dist/'));
我想用更简单的解决scheme来更新这个问题。 创build一个到node_modules的符号链接。
授予公共访问node_modules最简单的方法是创build一个指向您的公共目录中的node_modules的符号链接。 符号链接将使得文件就像创build链接的任何地方一样。
例如，如果节点服务器有用于提供静态文件的代码
app.use(serveStatic(path.join(__dirname, 'dist')));
而__dirname是指/path/到/应用程序，以便您的静态文件从/path/到/ app / dist
并且node_modules在/ path / to / app / node_modules，然后在mac / linux上创build这样的符号链接：
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中的目录不是一个安全的位置，可能是因为构build过程中有大量的grup或grunt干扰，那么可以为链接添加一个单独的目录并添加一个新的serveStatic调用，如：
ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules
并在节点中添加：
app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));
我没有find任何干净的解决scheme（我不想公开所有我的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> <% } %>
在我的Angular 2应用程序中，我在我的Index.html文件中有这个：
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
这是完整的文件：
<!DOCTYPE html> <html> <head> <base href="/" /> <title>TripMate - PPS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </head> <body> <my-app>Loading...</my-app> </body> </html>
