环境:
windows11
nodejs:v12.8.0
npm:v6.10.2
electron:v16.0.5
《俄罗斯方块》(Tetris, 俄文:Тетрис)是一款由俄罗斯人阿列克谢·帕基特诺夫于1984年6月发明的休闲游戏。它也是所有游戏开发者模仿的经典游戏之一,github上有个超高人气的React实现版本,贴个效果图,把它用Electron封装成exe随时玩。蜂巢指纹浏览器(NestBrowser)就是Electron封装的exe。
github源码地址:GitHub - chvin/react-tetris: Use React, Redux, Immutable to code Tetris. 🎮
国内gitee地址:react-tetris: Use React, Redux, Immutable to code Tetris. 🎮
第一步:下载源码
git clone react-tetris: Use React, Redux, Immutable to code Tetris. 🎮
第二步:确认Nodejs版本:v12.8.0
node -v
nodejs版本太高或者太低都会导致后面的步骤失败。因为这个项目使用的webpack版本是1.13.1,如果升级webpack,配置文件基本要重写。求简可行,直接匹配可行的nodejs版本。nodejs版本有一些兼容性问题,在开发蜂巢指纹浏览器(NestBrowser)过程中都经常需要解决。
第三步:编译项目,命令行依次敲入:
npm install或者yarn
npm start 或者yarn start 可以正常调试
npm run-scripts build 或者 yarn build 出错
a、rm是linux下才有效的命令,windows需要修改package.json文件:
修改前
"build": "rm -rf ./docs/* && webpack --config ./webpack.production.config.js --progress && ls ./docs”
修改后:
"build": "webpack --config ./webpack.production.config.js --progress”
b、然后手动删除项目目录下已经存在的docs目录再运行npm run-scripts build或者 yarn build,继续出错:
这是UglifyJs模块导致的,它的作用是压缩js,用Electron打包都是本地运行,可以不压缩,求简修改配置文件:w.config.js
修改前:
// JS压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}
),
修改后:
// // JS压缩
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// }
// ),
c、再次运行npm run-scripts build或者yarn build,成功生成新的docs目录
第四步:引入最简Electron并编译出exe文件
a、打开Electron的quick start:Quick Start | Electron
在文档最后面有一段完整的最简代码,复制下来保存为./src/resource/main.js
const { app, BrowserWindow } = require('electron')
//const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
//preload: path.join(__dirname, 'preload.js')//这个注销不需要
}
})
win.loadFile('docs/index.html')//这里增加一个前置目录名,就是build生成的docs目录名
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
b、为了把新生成的main.js自动复制到docs目录中,需要修改配置文件./w.config.js
修改前:
// 复制
new CopyWebpackPlugin([
{ from: './src/resource/music/music.mp3' },
{ from: './src/resource/css/loader.css' },
]),
修改后:
// 复制
new CopyWebpackPlugin([
{ from: './src/resource/music/music.mp3' },
{ from: './src/resource/css/loader.css' },
{ from: './src/resource/main.js' },
{ from: './src/resource/image/TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png' },
]),
这个配置在这个文件中有两份,都需要修改
说明:TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png文件来自https://img.alicdn.com/tps/TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png,下载回来放到./src/resource/image目录下
c、Electron启动的时候,需要加载指定的入口js文件
i、需要修改配置文件./package.json
修改前:
"name": "react-tetris",
"version": "1.0.1",
"description": "使用React、Redux、Immutable编写「俄罗斯方块」。Use Tetact, Redux, Immutable to coding \\"Tetris\\".",
修改后:
"name": "react-tetris",
"version": "1.0.1",
"main": "docs/main.js",
"description": "使用React、Redux、Immutable编写「俄罗斯方块」。Use Tetact, Redux, Immutable to coding \\"Tetris\\".",
ii、需要增加一个编译指令,再次修改配置文件./package.json
修改前:
"scripts": {
"start": "webpack-dev-server --progress",
"build": "webpack --config ./webpack.production.config.js --progress",
},
修改后:
"scripts": {
"start": "webpack-dev-server --progress",
"build": "webpack --config ./webpack.production.config.js --progress",
"compile-win32": "electron-builder -w"
},
iii、需要添加Electron-builder的打包模块
npm install electron@16.0.5 --save-dev或者yarn add -D electron@16.0.5
npm install electron-builder@21.0.9 --save-dev 或者yarn add -D electron-builder@21.0.9
iiii、运行npm run-scripts compile-win32或者yarn compile-win32完成打包并在./dist目录下生成了一个安装包和一个win-unpacked目录,这个win-unpacked目录实际上就是安装包释放的内容。
看图示:
点击win-unpacked目录react-tetris.exe就可以正常玩游戏了。看图示:
第五步:玩的过程中仔细观察,发现两个问题:
a、没有声音
b、恐龙的LOGO图没有正常显示
这个不能忍受,贴出修改方案:
1、针对a问题修改./src/unit/music.js:
修改前:
const hasWebAudioAPI = {
data: !!AudioContext && location.protocol.indexOf('http') !== -1,
};
修改后:
const hasWebAudioAPI = {
data: !!AudioContext &&
(location.protocol.indexOf('http') !== -1 || location.protocol.indexOf('file') !== -1),
};
2、针对b问题需要运行npm run-scripts build以后修改./docs/css-1.0.1.css
修改前:
.bg {
background: url('//img.alicdn.com/tps/TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png') no-repeat;
overflow: hidden;
}
修改后:
.bg {
background: url('TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png') no-repeat;
overflow: hidden;
}
第六步:重跑一下npm run-scripts build和npm run-scripts compile-win32收工。如图:
另外两点补充:蜂巢指纹浏览器(NestBrowser)可以定制浏览器指纹,是电商多开的利器。
1、electron-builder.json文件可以不用显示声明,不配置就是使用默认配置
2、修改css文件的时候,先需要把css内容格式化一下,可以使用vscode等任何工具