electron

目录

• electron 打包配置
• 客户端使用nodejs模块,路径
  • 几个路径
• 客户端使用 webpack 和 不使用 webpack
• 将cocos creator的 gameCanvas 嵌入到 electron中

electron 打包配置

配置参数见: https://www.cnblogs.com/mrwh/p/12961446.html

{
  "name": "TestCustomWeb",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^3.6.0",
    "electron": "^7.1.12",
    "electron-builder": "^22.3.2",
    "fast-png": "^5.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "start": "electron ."
  },
  "build": {
    "asar": false,
    "extraResources":  [
      {
        "from": "../build/web-desktop/",
        "to": "build/web-desktop"
      },
      {
        "from": "./build/bundle.js",
        "to": "bundle.js"
      }
    ],
    "appId": "com.zqhy.myCode",
    "productName": "TestWeb",
    "mac": {
      "category": "com.zqhy.editor"
    },
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
    },
    "electronVersion": "7.1.12",
    "directories": {
      "output": "appbuild/"
    }
  }
}

客户端使用nodejs模块,路径

let __DEV__ = false;

if(typeof window === 'object'){
    // client
    window.__DEV__ = __DEV__;
    window.electron = require('electron');
    window.fs = require('fs');
    window.path = require('path');
    window.require = require;
}else{
    // node
    global.__DEV__ = __DEV__;
}

关键点:

1. 通过 DEV 去控制测试和导出时的加载路径.
2. build->asar 设置成 false,可以比较方便的查看打包后的情况
3. build->extraResources 可以把资源 copy到打包后 resources 目录下

几个路径

let appPath = window.electron.remote.app.getAppPath();

appPath 表示当前应用程序所在目录.
a. 开发模式下:
路径为: 启动脚本 index.js 所在的目录.

b. 打包后:
路径为: xxx\win-unpacked\resources\app

let workDir  = process.cwd();

workDir 表示启动的目录.
a. 开发模式下:
路径为: 启动脚本 index.js 所在的目录.

b. 打包后:
路径为: XXX.exe 文件所在的目录.

客户端使用 webpack 和 不使用 webpack

TODO：

将cocos creator的 gameCanvas 嵌入到 electron中

1. 在 cocos creator游戏 assets 同级别目录下 创建 electron 工程
2. 修改 build-templates/web-desktop/index.html,并使用此模板.
3. 根据 cocos 的导出结果进行加载.

require('./client/eui');


// 设置app workDir
let app = window.electron.remote.app;
let workDir = window.workDir = app.getAppPath();
console.log('workDir:',workDir);

// cocos打包后目录
let cocosDir = window.path.join(workDir,'../build/web-desktop');

function async_loadAllJs(lstJs){
    let lstPromise = lstJs.map(js=>{
        return async_loadScript(js);
    });
    return Promise.all(lstPromise);
}

window.onload = function () {

    let lstJs = [];

    let path = window.path;
    let fs = window.fs;

    // 先加载settings
    let srcDir = path.join(cocosDir,'src');
    let srcFils = fs.readdirSync(srcDir);
    srcFils.forEach(file=>{
        let extname = path.extname(file);
        if (extname === '.js') {
            // 过滤掉 project.dev.7ad19.js
            // 会在 main.js 中去加载
            if(!file.startsWith('project.dev')){
                lstJs.push(`src/${file}`);
            }
        }
    });

    let files = fs.readdirSync(cocosDir);
    files.forEach(file => {
        let extname = path.extname(file);
        if (extname === '.js') {
            lstJs.push(file);
        }
    });

    console.log('lstJs:',lstJs);

    async_loadAllJs(lstJs).then(()=>{
        console.log('==所有脚本加载成功=====!');
        // 开始启动引擎---------------
        console.log('===========start engine===============');
        window.boot();
    }).catch(()=>{
         console.log('==============加载脚本失败!================');
    });
};

function async_loadScript(moduleName) {
    return new Promise(function (resolve, reject) {

        function scriptLoaded() {
            document.body.removeChild(domScript);
            domScript.removeEventListener('load', scriptLoaded, false);
            resolve();
        }

        let domScript = document.createElement('script');
        domScript.async = true;
        domScript.src = moduleName;
        domScript.addEventListener('load', scriptLoaded, false);
        domScript.addEventListener('error',()=>{
            reject();
        },false);
        document.body.appendChild(domScript);
    });
}

主要还是路径问题...