使用纯npm构建在NW.js(node-webkit)应用程序中加载Bootstrap

nol*_*exa 5 javascript node.js twitter-bootstrap node-webkit

我正在尝试使用NW.js构建一个简单的桌面应用程序.通过一些帖子的启发,包括这一次,我想尝试一个纯粹的npm做法没有任何bower,gruntgulp.

所以我继续使用jquerybootstrap库作为npm模块安装.当我在我的应用程序的JavaScript中注入模块时,如下所示:

global.jQuery = $ = require("jquery");
var bootstrap = require("bootstrap");
Run Code Online (Sandbox Code Playgroud)

ReferenceError: document is not defined来自一个bootstrap.我可以bootstrap通过老式的方式加载html文档:

<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
Run Code Online (Sandbox Code Playgroud)

我问自己require在脚本文件中加载bootstrap trough是否是一个愚蠢的想法?基本上,我不需要那里.它可以通过html中的脚本标记加载.什么是最佳做法?我糊涂了.

更新.解决方案

接受了@Kuf的建议后,我创建了一个build.js脚本

var copyfiles = require('copyfiles');
copyfiles(["node_modules/bootstrap/dist/js/bootstrap.js", "vendor/js"], true, function (err) {
    if (err) return console.error(err);
});
copyfiles(["node_modules/bootstrap/dist/css/bootstrap.css", "vendor/css"], true, function (err) {
    if (err) return console.error(err);
});
Run Code Online (Sandbox Code Playgroud)

prestart钩子触发:

"scripts": {
  "build": "node build.js",
  "prestart": "npm run build"
}
Run Code Online (Sandbox Code Playgroud)

这允许我bootstrap通过方便的路径访问资源:

<link href="vendor/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="vendor/js/bootstrap.js"></script>
Run Code Online (Sandbox Code Playgroud)

Kuf*_*Kuf 2

我认为发生错误是因为您在没有窗口上下文的情况下运行 require 。您从哪里运行包含?请注意,对于从以下位置运行的代码node-main

window: ... 在脚本加载时不可用,因为脚本是在 DOM 窗口加载之前执行的。(来源

即使使用 require 导入 JS,您仍然需要包含 css 文件。我认为还没有“干净”或开箱即用的解决方案。尽管您所做的肯定会起作用,但它会生成奇怪且不自然的脚本路径。

我会添加一个构建脚本

"scripts": {
    "build": "node build.js"
  }
Run Code Online (Sandbox Code Playgroud)

在 package.json 中将 bootstrap 从 node_modules 复制到 '/dist/' 以使路径更清晰。