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


当前回答

我做了下面的更改,以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>
<% } %>

其他回答

我没有找到任何干净的解决方案(我不想暴露所有node_modules的源代码),所以我只是写了一个Powershell脚本来复制它们:

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

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

正如jfriend00提到的,你不应该公开你的服务器结构。您可以将项目依赖文件复制到公共/脚本之类的文件中。你可以用dep-linker很容易做到这一点,像这样:

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

我做了下面的更改,以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>
<% } %>

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

要在html中使用node_modules中的多个文件,我发现最好的方法是将它们放入一个数组,然后循环它们,使它们对web客户端可见,例如使用node_modules中的filepond模块:

const filePondModules = ['filepond-plugin-file-encode', 'filepond-plugin-image-preview', 'filepond-plugin-image-resize', 'filepond']
filePondModules.forEach(currentModule => {
    let module_dir = require.resolve(currentModule)
                           .match(/.*\/node_modules\/[^/]+\//)[0];
    app.use('/' + currentModule, express.static(module_dir + 'dist/'));
})

然后在html(或布局)文件中,像这样调用它们:

    <link rel="stylesheet" href="/filepond/filepond.css">
    <link rel="stylesheet" href="/filepond-plugin-image-preview/filepond-plugin-image-preview.css">
...
    <script src="/filepond-plugin-image-preview/filepond-plugin-image-preview.js" ></script>
    <script src="/filepond-plugin-file-encode/filepond-plugin-file-encode.js"></script>
    <script src="/filepond-plugin-image-resize/filepond-plugin-image-resize.js"></script>
    <script src="/filepond/filepond.js"></script>