zoukankan      html  css  js  c++  java
  • 基于node-webkit的web项目打包方案

    下载node-webkit

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

            找到Downloads这一小节,然后下载对应平台的node-webkit预编译包。(为了介绍起来方便,本文后续内容全部针对windows平台,OSX和linux平台上的操作类似,就不做特意说明了。)

            下载完之后解压,可以看到如下内容:



     

            双击nw.exe直接运行,看到如下界面说明一切都ok,在你的机器上可以运行:



     

    Hello nw

            老规矩,先来Hello World!

            建一个example1.html,内容如下:

    <!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,内容如下:

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

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



     

     

            注意,用什么工具压缩无所谓,但是一定要压缩成ZIP格式。

            把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

  • 相关阅读:
    SAP OPEN UI5 Step 8: Translatable Texts
    SAP OPEN UI5 Step7 JSON Model
    SAP OPEN UI5 Step6 Modules
    SAP OPEN UI5 Step5 Controllers
    SAP OPEN UI5 Step4 Xml View
    SAP OPEN UI5 Step3 Controls
    SAP OPEN UI5 Step2 Bootstrap
    SAP OPEN UI5 Step1 环境安装和hello world
    2021php最新composer的使用攻略
    Php使用gzdeflate和ZLIB_ENCODING_DEFLATE结果gzinflate报data error
  • 原文地址:https://www.cnblogs.com/axl234/p/6638219.html
Copyright © 2011-2022 走看看