美文网首页
使用 electron-builder 和 electron-p

使用 electron-builder 和 electron-p

作者: 梁坤同学 | 来源:发表于2019-12-15 11:09 被阅读0次

    打包方式

    Eelectron 目前有两种打包工具 electron-builderelectron-packager

    对 electron 应用进行打包的时候,需要我们先将我们代码打包为静态资源,然后再选择打包工具进行 exe 程序的打包。

    使用 electron-builder 打包

    安装依赖

    yarn add electron-builder --save-dev
    

    打包

    • 在项目的 package.json 文件中定义 name、description、version 和 author 信息。
    • 在项目的 package.json 文件中定义 build 字段:
    "build": {
        "appId": "Demo",
        "productName": "productName",
        "copyright": "Copyright © 2019 XXX",
        "mac": {
          "category": "public.app-category.type",
      },
    
    • package.json 中添加 scripts
    "scripts": {
        "pack": "electron-builder --dir",
        "prepack": "npm run build",
        "dist": "electron-builder",
        "predist": "npm run build",
    }
    

    由于我们在打包应用程序之前需要先打包静态资源,那么在对应的命令之前加上 pre ,在执行这条命令 npm run pack 的时候,webpack 就会先自动执行 npm run prepack

    • main.js 文件中引入 path 模块,将主进程的加载文件修改为静态资源的主文件 index.html
    …
    const urlLocation = `file://${path.join(__dirname, "./index.html")}`
    
    • 打包

    script 中配置了 prepack 和 predist,因此执行以下命令会自动先去执行 build 打包

    • 生成应用文件
    npm run pack
    
    • 生成一个 exe 或者 dmg 文件
    npm run dist
    
    • 指定平台和架构
    # windows 64bit
    electron-builder --win --x64
    # windows and mac 32bit
    electron-builder --win --mac --ia32
    

    使用 electron-packager 打包

    安装依赖

    yarn add electron-packager --save-dev
    

    打包

    • package.json 中添加 scripts
    "scripts": {
      "packager": "electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]"
    }
    

    最简单的就是直接运行 electron-pacager .进行打包。

    默认情况下, appname 为 当前项目下的 package.json 文件中的 productName 或者 name 字段的值;platform 和 arch 则与主机一致,在 Windows 64位 下打包就是 Windows 64 位的版本。

    • 打包
    npm run packager
    

    相关文章

      网友评论

          本文标题:使用 electron-builder 和 electron-p

          本文链接:https://www.haomeiwen.com/subject/vajknctx.html