如何打包Node Web应用程序以便可以将其安装为本地应用程序？
[英]How do I package up a Node web app so it can be installed as a local app?
问题描述
I have a Node web app that I'd like to package up as a standalone cross-platform application; 
我有一个Node Web应用程序，我想将其打包为一个独立的跨平台应用程序。 kind of like Cordova except it's still Node behind the scenes and it's not for mobile devices. 有点像Cordova，只是它仍然是Node幕后的对象，并且不适用于移动设备。 I'd like to be able to run the executable and have the web up run in some kind of local sandbox rather than have to be accessed in the default browser. 我希望能够运行可执行文件，并使Web在某种本地沙箱中运行，而不是必须在默认浏览器中进行访问。
Are there already tools for doing this? 是否已经有执行此操作的工具？ I've poked around on Google but since it's my first foray into trying this maybe I'm just not using the right search terms; 我已经在Google上闲逛了，但是由于这是我的第一次尝试，也许我只是没有使用正确的搜索字词。 I keep using the word "sandbox" but I'm not sure that's what I mean since sandboxing appears to be mostly about security, not so much about packaging up a web app. 我一直使用“沙盒”一词，但是我不确定这是什么意思，因为沙盒似乎主要是关于安全性，而不是包装Web应用程序。
We're putting together a node-inspector -style node debugger, but unlike node-inspector we're not using Chromium's Blink debugger and we don't want the app to have to run in the browser, which only confuses users not used to debugging a web app with another web app. 我们正在组装一个节点检查器风格的节点调试器，但是与节点检查器不同，我们没有使用Chromium的Blink调试器，并且我们不希望该应用程序必须在浏览器中运行，这只会使不习惯使用该功能的用户感到困惑使用另一个Web应用程序调试Web应用程序。
If we can box the app up as an installed app then the process of debugging will seem much more straightforward to users. 如果我们可以将该应用安装为已安装的应用，则调试过程对于用户而言似乎更加简单。 Since we're not using Blink we won't be dependent upon native Chrome function calls either, which seems to break node-inspector every other Chrome version. 由于我们不使用Blink，因此我们也不会依赖于本地Chrome函数调用，这似乎会破坏所有其他Chrome版本的node-inspector。 So I believe this should be doable if I can find the right tools to accomplish it. 因此，我相信如果我能找到合适的工具来实现它，那么这应该是可行的。
To summarize: 总结一下：
- I want to package up a Node web app as a local installable app. 我想将Node Web应用程序打包为本地可安装应用程序。
- I want it to work on Windows, OSX, and Linux (Ubuntu at least). 我希望它可以在Windows，OSX和Linux（至少是Ubuntu）上运行。
- Please don't go on tangents about whether or not you think we should be building a debugger. 请不要继续讨论您是否认为我们应该构建调试器。 This question is about packaging up a web app as a proper local app to streamline the user experience. 这个问题是关于将网络应用打包为适当的本地应用，以简化用户体验。 Thank you :) 谢谢 ：）
1 个解决方案
解决方案1
1 已采纳 2015-01-13 15:22:47
After a day of searching around I finally discovered node-webkit . 经过一天的搜索，我终于找到了node-webkit 。 The project mixes the node runtime with the webkit runtime and places them in the same thread. 该项目将节点运行时与Webkit运行时混合在一起，并将它们放置在同一线程中。 You can literally use node's functions from within your front-end JavaScript because the app is a locally packaged app. 因为该应用程序是本地打包的应用程序，所以您可以从前端JavaScript内部使用字面量的功能。
The only difference is that instead of starting a node script to host a web application, you point package.json at the index.html file you'd like it to host at startup. 唯一的区别是，您无需启动节点脚本来托管Web应用程序，而是将package.json指向要在启动时托管的index.html文件。 From there you can use the node-webkit API to open additional windows, etc. It works great! 从那里，您可以使用node-webkit API打开其他窗口，等等。效果很好！
Getting a demo running was easy. 运行演示很容易。 Here's how I made a small demo that reads all the files and directories in my code directory where I keep all my development projects and displays them in a <ul> element on the page. 这是我做的一个小演示，它读取code目录中的所有文件和目录，我将所有开发项目保存在其中，并将其显示在页面上的<ul>元素中。
// node-webkit-playground/index.html
<!DOCTYPE html>
<html>
<head>
<title>node-webkit-playground</title>
<style type="text/css">
body {
background-color: #000;
color: #0f0;
}
</style>
<script>
var $ = require('jquery');
var fs = require('fs');
var path = require('path');
var downloadedFiles = fs.readdirSync('/Users/chev/code');
$(function () {
var $fileList = $('#fileList');
downloadedFiles.forEach(function (file) {
var fileName = path.basename(file);
$('<li>').text(fileName).appendTo($fileList);
});
})
</script>
</head>
<body>
<ul id="fileList">
</ul>
</body>
</html>
// node-webkit-playground/package.json
{
"name": "node-webkit-playground",
"main": "index.html",
"window": {
"toolbar": false,
"frame": true,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 800
}
}
Then from within my project folder: 然后从我的项目文件夹中：
Install jquery from npm and install nodewebkit globally.
从npm安装jquery并全局安装nodewebkit。 $ npm install jquery
$ npm安装jquery
$ npm install -g nodewebkit$ npm install -g nodewebkit Create a zip archive of the project, but rename extension to
.nw.创建项目的zip存档，但将扩展名重命名为.nw。$ zip -r app.nw *
$ zip -r app.nw * Run the file using node-webkit.
使用node-webkit运行文件。 $ nodewebkit app.nw
$ nodewebkit app.nw
After that it's super easy to package up a .app for OSX, a .exe for Windows, or even a .deb for Linux. 之后，打包用于OSX的.app ，用于Windows的.exe甚至用于Linux的.deb 非常容易 。
I believe this is going to be the perfect setup for the debug tool we're building. 我相信这将是我们正在构建的调试工具的理想设置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.