electron 打包web应用

最新推荐文章于 2025-06-13 15:34:32 发布

Luncher

最新推荐文章于 2025-06-13 15:34:32 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术 Nodejs 文章标签： atom web app nodejs electron

本文链接：https://blog.youkuaiyun.com/gentlycare/article/details/51108292

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

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

时下流行的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,