Scratch 3.0桌面版編輯器打包

系統	版本
Ubuntu	18.04.1
node	v12.16.1
node.js	https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz
scratch-vm	https://codeload.github.com/LLK/scratch-vm/zip/develop
scratch-gui	https://codeload.github.com/LLK/scratch-gui/zip/develop

最近看到網上有博主分享Scratch 3.0 桌面版編輯器打包，於是拿來學習一下，順便記錄下來，我使用的是Linux系統，Windows系統和Mac系統的開發打包方法類似。

安裝Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。

wget https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz # 下載壓縮包
tar -xvf node-v12.16.1-linux-x64.tar.xz # 解壓node壓縮包
mv node-v12.16.1-linux-x64 /opt/ # 將解壓文件移動到/opt文件夾下
sudo ln -s /opt/node-v12.16.1-linux-x64/bin/node /usr/local/bin/node # 創建全局軟連接
sudo ln -s /opt/node-v12.16.1-linux-x64/bin/npm /usr/local/bin/npm # 創建全局軟連接
node -v # v12.16.1

安裝scratch-gui

scratch-gui是基於React的組件庫，組成了整個頁面，對於界面有定製化的在這個庫下進行。

wget https://codeload.github.com/LLK/scratch-gui/zip/develop
mv develop scratch-gui-develop.zip
unzip scratch-gui-develop.zip
mv scratch-gui-develop/ scratch-gui/
cd scratch-gui
npm install
npm link

安裝scratch-desktop

scratch-desktop是一個獨立的桌面應用程序組件庫，對於桌面版編輯器打包在這個庫下進行。

wget https://codeload.github.com/LLK/scratch-desktop/zip/develop
mv develop scratch-desktop-develop.zip
unzip scratch-desktop-develop.zip
mv scratch-desktop-develop/ scratch-desktop/
cd scratch-desktop
npm install
npm link scratch-gui
npm run build-gui

修改配置文件

編譯打包之前需要修改配置文件 scratch-desktop/scripts/electron-builder-wrapper.js，添加“+”位置代碼。

/**
 * @overview This script runs `electron-builder` with special management of code signing configuration on Windows.
 * Running this script with no command line parameters should build all targets for the current platform.
 * On Windows, make sure to set CSC_* or WIN_CSC_* environment variables or the NSIS build will fail.
 * On Mac, the CSC_* variables are optional but will be respected if present.
 * See also: https://www.electron.build/code-signing
 */

const {spawnSync} = require('child_process');

/**
 * Strip any code signing configuration (CSC) from a set of environment variables.
 * @param {object} environment - a collection of environment variables which might include code signing configuration.
 * @returns {object} - a collection of environment variables which does not include code signing configuration.
 */
const stripCSC = function (environment) {
    const {
        CSC_LINK: _CSC_LINK,
        CSC_KEY_PASSWORD: _CSC_KEY_PASSWORD,
        WIN_CSC_LINK: _WIN_CSC_LINK,
        WIN_CSC_KEY_PASSWORD: _WIN_CSC_KEY_PASSWORD,
        ...strippedEnvironment
    } = environment;
    return strippedEnvironment;
};

/**
 * @returns {string} - an `electron-builder` flag to build for the current platform, based on `process.platform`.
 */
const getPlatformFlag = function () {
    switch (process.platform) {
    case 'win32': return '--windows';
    case 'darwin': return '--macos';
    case 'linux': return '--linux';
    }
    throw new Error(`Could not determine platform flag for platform: ${process.platform}`);
};

/**
 * Run `electron-builder` once to build one or more target(s).
 * @param {string} targetGroup - the target(s) to build in this pass.
 * If the `targetGroup` is `'nsis'` then the environment must contain code-signing config (CSC_* or WIN_CSC_*).
 * If the `targetGroup` is `'appx'` then code-signing config will be stripped from the environment if present.
 */
const runBuilder = function (targetGroup) {
    // the appx build fails if CSC_* or WIN_CSC_* variables are set
    const shouldStripCSC = (targetGroup === 'appx');
    const childEnvironment = shouldStripCSC ? stripCSC(process.env) : process.env;
    if ((targetGroup === 'nsis') && !(childEnvironment.CSC_LINK || childEnvironment.WIN_CSC_LINK)) {
        throw new Error(`NSIS build requires CSC_LINK or WIN_CSC_LINK`);
    }
    const platformFlag = getPlatformFlag();
    const command = `electron-builder ${platformFlag} ${targetGroup}`;
    console.log(`running: ${command}`);
    const result = spawnSync(command, {
        env: childEnvironment,
        shell: true,
        stdio: 'inherit'
    });
    if (result.error) {
        throw result.error;
    }
    if (result.signal) {
        throw new Error(`Child process terminated due to signal ${result.signal}`);
    }
    if (result.status) {
        throw new Error(`Child process returned status code ${result.status}`);
    }
};

/**
 * @returns {Array.<string>} - the default list of target groups on this platform. Each item in the array represents
 * one call to `runBuilder` for one or more build target(s).
 */
const calculateTargets = function () {
    switch (process.platform) {
    case 'win32':
        // run in two passes so we can skip signing the appx
        return ['nsis', 'appx'];
    case 'darwin':
        // Running 'dmg' and 'mas' in the same pass causes electron-builder to skip signing the non-MAS app copy.
        // Running them as separate passes means they both get signed.
        // Seems like a bug in electron-builder...
        return ['dmg', 'mas'];
+   case 'linux':
+       // Make a packaged build for linux OS
+       return ['appimage', 'snap'];
    }
    throw new Error(`Could not determine targets for platform: ${process.platform}`);
};

// TODO: allow user to specify targets? We could theoretically build NSIS on Mac, for example.
const targets = calculateTargets();
for (const targetGroup of targets) {
    runBuilder(targetGroup);
}

編譯打包

npm run dist # 編譯後的安裝包Scratch Desktop-3.8.0.AppImage和scratch-desktop_3.8.0_amd64.snap保存在scratch-desktop/dist/文件夾中。