系统 | 版本 |
---|---|
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
BUILD_MODE=dist npm run build
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/文件夹中。