electron 打包web应用

本文介绍了如何使用Electron打包Web应用,包括选择Electron的原因、项目构建过程、安装相关工具以及编译安装包的步骤。通过配置文件设置项目入口、编译环境和输出目录,使用asar避免资源文件压缩,并指定不同平台的编译选项,最终成功创建多平台的安装包。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

时下流行的web app打包工具主要有两个,一个是国内开发者主导的nw.js,另一个是国外大厂支撑的electron。对比了nw.js以及electron之后还是选择了electron,原因主要有以下几点:

  • 1、基于该工具已有广泛被使用的产品,如:atomvs 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,
   
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值