我有一个关于将node_modules包含到HTML网站的最佳实践的问题。
假设我在node_modules文件夹中有Bootstrap。现在对于网站的生产版本,我将如何包括位于node_modules文件夹内的引导脚本和CSS文件?将Bootstrap留在该文件夹中并执行如下操作是否有意义?
<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>
或者我必须在gulp文件中添加规则,然后将这些文件复制到dist文件夹中?或者最好让gulp以某种方式完全从我的HTML文件中删除本地引导,并将其替换为CDN版本?
如果你想要一个快速简单的解决方案(并且你已经安装了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
或者像这样在窗户上:
mklink /path/to/app/node_modules /path/to/app/dist/node_modules
现在一个get请求:
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')));
我做了下面的更改,以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>
<% } %>