时下流行的web app打包工具主要有两个,一个是国内开发者主导的nw.js
,另一个是国外大厂支撑的electron
。对比了nw.js
以及electron
之后还是选择了electron
,原因主要有以下几点:
- 1、基于该工具已有广泛被使用的产品,如:
atom
、vs code
等。 - 2、在开发者中口碑比较好,有大公司参与进来,遇到问题,提个
issue
能很快得到响应。
下载基于electron
打包的HolaStudio。
使用webpack
编译项目
HolaStudio
离线版本打包的时候需要把服务器、客户端打包到一个安装包内。所以第一步首先要把服务器代码混淆,为接下来打包做准备。
构建工具选择了webpack
, 关于构建工具没有做很细致的筛选,因为我都不熟悉:)。所以就听从朋友建议,选择了入了webpack
的坑。
关于webpack
的使用,官方有详细的文档说明,github
自行搜索。
webpack
需要一个配置文件(webpack.config.js
),用来描述项目的环境,以及第三方插件的集成等信息:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs-extra');
var packageJSON = fs.readJsonSync('./package.json');
var nodeModules = {};
fs.readdirSync('./node_modules')
.filter(function(x) {
return ['.bin', '.npminstall'].indexOf(x) === -1;
})
.filter(function(y) {
return !(y in packageJSON.devDependencies);
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: './app.js',
target: 'node',
context: __dirname,
node: {
__dirname: false,
__filename: false
},
output: {
path: path.join(__dirname, 'output'),
filename: 'output.js',
externals: nodeModules,