Electron-Next-Skeleton 项目使用教程
1. 项目目录结构及介绍
electron-next-skeleton/
├── .github/
│ └── workflows/
├── .vscode/
├── node_modules/
├── public/
├── src/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ └── utils/
├── .gitignore
├── package.json
├── tsconfig.json
├── next.config.js
├── README.md
└── yarn.lock
目录结构说明
- .github/workflows/: 存放 GitHub Actions 的工作流配置文件。
- .vscode/: 存放 VSCode 的配置文件。
- node_modules/: 存放项目依赖的 Node.js 模块。
- public/: 存放静态资源文件,如图片、字体等。
- src/: 项目的源代码目录。
- components/: 存放 React 组件。
- pages/: 存放 Next.js 页面组件。
- styles/: 存放样式文件。
- utils/: 存放工具函数。
- .gitignore: 指定 Git 忽略的文件和目录。
- package.json: 项目的配置文件,包含依赖、脚本等信息。
- tsconfig.json: TypeScript 配置文件。
- next.config.js: Next.js 配置文件。
- README.md: 项目的说明文档。
- yarn.lock: 锁定依赖版本的文件。
2. 项目启动文件介绍
package.json
{
"name": "electron-next-skeleton",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"electron": "electron ."
},
"dependencies": {
"next": "^11.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"electron": "^13.0.0",
"typescript": "^4.3.2"
}
}
启动命令
yarn dev
: 启动开发服务器,使用 Next.js 的开发模式。yarn build
: 构建项目,生成生产环境的静态文件。yarn start
: 启动生产环境的服务器。yarn electron
: 启动 Electron 应用程序。
3. 项目配置文件介绍
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["src"]
}
next.config.js
module.exports = {
reactStrictMode: true,
webpack: (config, { isServer }) => {
if (!isServer) {
config.target = 'electron-renderer';
}
return config;
}
};
配置文件说明
- tsconfig.json: TypeScript 编译器的配置文件,定义了编译选项和包含的文件。
- next.config.js: Next.js 的配置文件,可以自定义 Webpack 配置等。
通过以上配置,项目可以顺利启动并运行,同时支持 TypeScript 和 Electron 的开发环境。