基于node-webkit的web项目打包方案

时间 2019-11-13

标签基于 node webkit web 项目打包方案栏目 HTML 繁體版

原文原文链接

下载node-webkit

https://github.com/rogerwang/node-webkithtml

找到Downloads这一小节，而后下载对应平台的node-webkit预编译包。（为了介绍起来方便，本文后续内容所有针对windows平台，OSX和linux平台上的操做相似，就不作特地说明了。）node

下载完以后解压，能够看到以下内容：linux

双击nw.exe直接运行，看到以下界面说明一切都ok，在你的机器上能够运行：git

Hello nw

老规矩，先来Hello World!github

建一个example1.html，内容以下：web

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello node-webkit!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

在同一级目录下再建一个package.json，内容以下：npm

{
  "name": "nw-demo",
  "main": "example1.html"
}

好了，用你机器上的压缩工具，rar或者7z或者神马神马的，把这两个文件压缩成exampl1.zip，以下图所示：json

注意，用什么工具压缩无所谓，可是必定要压缩成ZIP格式。windows

把example1.zip拷贝到与nw.exe同级的目录下，以下图：网络

而后用鼠标把example1.zip拖动到nw.exe上运行（用命令行也能够，不过在windows下仍是直接拖比较爽一点），效果以下图：

这样，第一个例子就完成了，而后你本身能够去玩儿了。

按照官方的搞法，example1.zip可更名成example1.nw，这样显得更加高大上一些。不过因为小僧的BIG一贯比较低，私认为用.zip做为后缀也没啥不能够。

来点儿JS

第一个例子代码很是简单，你能够本身加点儿你最熟悉的JS代码，好比这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Example2</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <h1>Example2</h1>
    <script>
        alert("This is example2!");
    </script>
  </body>
</html>

显然，这里有不少HTML5的习惯写法，那固然是必须的对吧？由于webkit在google的调教之下早已成了HTML5的开路先锋了！

打包和分发

如上图，很显然，要想让咱们的应用跑起来，以上这些dll和pak文件是少不了的（至于每一个文件是用来干吗的，请参见官方的描述文档）。

那么，对于咱们作的example1这个简单的应用，怎么让咱们的用户能运行它呢？固然，让咱们的用户本身去下载node-webkit而后解压运行，这也算一种办法，这样的话咱们只要把example1.zip文件扔给他就能够了。

不过这样总以为有点儿奇怪，要是能把全部相关的内容都打包成一个独立的exe文件就行了，好比打包成example1.exe，这样用户拿到以后直接双击就能够运行，这样显然是极好的。

OK,let's go!

首先，咱们要合并example1.zip和nw.exe，造成一个新文件，名为example1.exe，这一点咱们经过windows的命令行下的copy命令能够实现：

copy /b nw.exe+example1.zip example1.exe

注意，nw.exe必须放在+号前面。

这样就生成了一个名为example1.exe的文件，双击这个文件，看到的效果和第一个例子相同。很显然，这个example1.exe仍是要依赖那些dll文件才能运行，因此，这时候咱们须要一款打包工具来帮助咱们把这些example1.exe和dll文件都打包到一块儿，它就是Enigma Virtual Box ，你们能够点击这里下载安装：

http://enigmaprotector.com/assets/files/enigmavb.exe

安装完成以后启动，看到以下界面：

打包过程截图（请按照图中的配置操做）：

点击右下角的Process按钮开始打包，最终得到了一个名为example1_boxed.exe的文件。把这个文件拷贝到其它任意目录中双击，若是能顺利运行，说明打包成功！你能够把它分发给你的用户了！

官方的文档上还介绍了其它几种打包分发方式，不过看起来都不是很实用，有兴趣的参见这里：

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

未竟的主题

以上就是关于node-webkit用法的一些简单示例，你能够沿着这个方向本身去探索了。有热心的网友把咱们的Ext4.1中文文档打了一个包出来，能够到脚本娃娃的群共享（号83163037）去下载（比较大，很差放上来），入群口令nw

如何最小化发布？

在官方发布的内容里面，icudt.dll这个文件有9724k，nw.exe有38396k，很显然，这个体积略显庞大了一些，若是咱们的应用自己很小，只有几百K，而打包出来的东西有几十M显然是不合适的，这样很是不方便拷贝和网络传播。

很显然，咱们还须要一款工具，可以根据须要进行最小化的打包发布。

不过目前我还没找到这样的好东东，各路大神若有知道的，求指教。

如何利用nodejs调用本地接口？

很显然，既然nodejs都被打包进来了，网上众多的npm模块都是能够拿过来使用的，具体作法官方主页上都有比较详细的介绍，参见这里https://github.com/rogerwang/node-webkit