如何包含位于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版本?

8 Solutions collect form web for “如何包含位于node_modules文件夹内的脚本?”

通常,你不想公开你的内部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> 
  • 如何使Twitter的引导工具提示有多行?
  • 如何使自举列高度达到100%行高?
  • 如何使引导表行可点击?
  • Bootstrap 3 - inputxs(小于sm)
  • 自举中7个相同的列
  • 协调Angular.js和Bootstrap表单validation样式
  • Twitter Bootstrap:100%高度的容器div
  • 在Bootstrap工具提示中显示长文本
  • 保持文本环绕引导3响应式devise
  • 从angular度控制器closuresTwitter Bootstrap模态
  • Bootstrap 3使用Chevron图标折叠显示状态