tlmgr-electron-react 项目使用教程
1. 项目的目录结构及介绍
tlmgr-electron-react/
├── assets/
├── build/
├── docs/
├── node_modules/
├── src/
│ ├── components/
│ ├── containers/
│ ├── redux/
│ ├── styles/
│ ├── App.js
│ ├── index.js
│ └── main.js
├── .babelrc
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js
- assets/: 存放项目所需的静态资源,如图片、字体等。
- build/: 存放构建后的文件,用于部署。
- docs/: 存放项目文档。
- node_modules/: 存放项目依赖的npm包。
- src/: 项目源代码目录。
- components/: 存放React组件。
- containers/: 存放React容器组件。
- redux/: 存放Redux相关文件,如actions、reducers等。
- styles/: 存放样式文件。
- App.js: 主应用组件。
- index.js: 入口文件,用于渲染React组件到DOM。
- main.js: Electron的主进程文件。
- .babelrc: Babel配置文件。
- .gitignore: Git忽略文件配置。
- package.json: 项目配置文件,包含依赖、脚本等信息。
- README.md: 项目说明文档。
- webpack.config.js: Webpack配置文件。
2. 项目的启动文件介绍
main.js
main.js
是Electron的主进程文件,负责创建窗口和管理应用的生命周期。
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
mainWindow.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
index.js
index.js
是React应用的入口文件,负责渲染React组件到DOM。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
3. 项目的配置文件介绍
package.json
package.json
是项目的配置文件,包含项目的基本信息、依赖、脚本等。
{
"name": "tlmgr-electron-react",
"version": "1.0.0",
"description": "TeX Live Manager GUI using Electron and React",
"main": "src/main.js",
"scripts": {
"start": "electron .",
"build": "webpack",
"test": "jest"
},
"dependencies": {
"electron": "^13.1.7",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"babel-loader": "^8.2.2",
"jest": "^27.0.4"
}
}
webpack.config.js
webpack.config.js
是Webpack的配置文件,用于打包和优化前端资源。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle