如何使用webpack打包ES6的Nodejs后台程序

JavaScript015

如何使用webpack打包ES6的Nodejs后台程序,第1张

这种配置方式和你的可能有点不同,仅作参考 dev.config.js部分 var path = require('path')var webpack = require('webpack')var ExtractTextPlugin = require('extract-text-webpack-plugin')var autoprefixer = require('autoprefixer'.

windows上用node-webkit打包的话,要把内容解压缩到node-webkit/文件夹中。

创建 package.json

{

"name": "nw-demo",

"main": "index.html"

}

其他常用配置请参考:Manifest format · rogerwang/node-webkit Wiki

常用的配置如:

{

"main": "index.html",

"name": "nw-demo",

"description": "demo app of node-webkit",

"version": "0.1.0",

"keywords": [ "demo", "node-webkit" ],

"window": {

"title": "node-webkit demo",

"icon": "link.png",

"toolbar": true,

"frame": false,

"width": 800,

"height": 500,

"position": "mouse",

"min_width": 400,

"min_height": 200,

"max_width": 800,

"max_height": 600

}

}

其中icon要求的格式为PNG或者JPG。

运行

可以使用两种方案运行,一种是将网页内容(和index.html平行的内容)+package.json打包,然后拷贝到node-webkit/文件夹中;另一种是将node-webkit/内容拷贝到网页所在的文件夹中。

压缩 App

将你的网页内容(主页是index.html)和上述的package.json压缩为zip,如app.zip,将app.zip改名为app.nw。

完成上述步骤可以通过压缩软件,也可以通过命令:

zip app.nw index.html package.json

注意,不要压缩index.html所在的目录,而是该目录下的内容。最终app.nw的结构如下:

app.nw

|-- package.json

|-- ...

`-- index.html

将 app.nw 拷贝到node-webkit/下,node-webkit/目前的文件结构如下:

app.exe

app.nw

ffmpegsumo.dll

icudt.dll

libEGL.dll

libGLESv2.dll

nw.exe

nw.pak

nwsnapshot.exe

运行请执行以下命令:

nw.exe app.nw

可以通过以下命令将app.nw合并到nw.exe中:

copy /b nw.exe+app.nw app.exe

有两个工具可以同时执行压缩和合并,分别为:

nodebob 使用Windows Bat脚本写的工具,只适用于Windows,并且只能打包为Windows的可执行程序。

grunt-node-webkit-builder 使用Grunt工具,可以构建Linux、Windows、Mac平台的可执行程序。

两者最终生成的目录结构为:

ffmpegsumo.dll

icudt.dll

libEGL.dll

libGLESv2.dll

nw.exe

nw.pak

其中nw.exe为可执行程序(包含nw文件),其他为依赖项,依赖项的作用分别为:

nw.pak contains important javascript lib files. Required.

icudt.dll a important network library. Required.

ffmpegsumo.dll media library, if you want to use <video>and <audio>tag, or other media related features, you should ship it.

libEGL.dll used for WebGL. Recomended.

libGLESv2.dll used for GPU acceleration Recomended.

D3DCompiler_43.dll d3dx9_43.dll if you want to make sure WebGL works on more hardware. These 2 files are from DirectX redistributable.

注意:采用合并的方式需要为每个平台提供单独的可执行程序,否则可以提供nw压缩包,在不同的note-webkit中运行。

参考:How to package and distribute your apps · rogerwang/node-webkit Wiki

不压缩 App

将package.json拷贝到跟index.html平行的目录,然后将下载的node-webkit离线包中的文件拷贝到和package.json平行的目录。最终的文件结构:

index.html

… Other website content

ffmpegsumo.dll

icon.png

icudt.dll

libEGL.dll

libGLESv2.dll

nw.exe

nw.pak

package.json

单击nw.exe即可运行。

打包

单一可执行文件

接下来我们可以将所有文件打包成一个可执行程序,使用的工具为:Enigma Virtual Box。

使用方法:

下载

安装并打开。

对于中文用户可以在Language菜单中选择Chinese

在请选择待封包的主程中浏览和选择主程序,如nw.exe。

拖拽(或者单击Add按钮)所有依赖项,包括*.dll和nw.pak到File选项卡的空白处。

选择选择文件选项,选择压缩文件来压缩。尽管这样可以在一定程度上较小压缩包的大小,但不建议这么做,因为或拖慢最终可执行程序的速度。

点击执行封包。

Enigma Virtual Box

也可以使用命令:

enigmavbconsole project.evb

其中project.evb为工程文件,我们可以在GUI工具中配置好后保存为工程文件。