rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
114 lines (81 loc) • 3.29 kB
Markdown
---
sidebar_position: 6
---
# 代码编译
在主进程中，我们为了保持主进程代码的目录结构，这对于我们在主进程中使用一些动态导入等会更加方便。但也带来了一些问题：
- 我们主进程通过 babel 编译，因此在编译不同的目录的时候，需要通过命令参数 --extra 来指定进行编译。
- 我们在主进程使用的 node_modules 会通过 babel 去分析识别，生成 dist/package.json ，从而在构建的时候将依赖打包到应用中。未被识别的一些间接引用，则需要通过 externalDepencies 来指定。
## 指定额外目录
我们现在的主进程代码，默认都放在 electron 目录下，前端代码放在 src 目录下。有时候，主进程、渲染进程有些通用的常量可能需要放到一个公用的目录下，比如放在 shared 目录中。
首先，我们创建 shared 目录和 `shared/index.ts`，在里面写上：
```ts
export const a = 1;
```
### 渲染进程中使用
我们在根目录的 `tsconfig.json` 中加上 `includes: [...,'shared']`，我们可以配置上别名：
```json
...
"paths": {
...
"@shared/*": ["./shared/*"]
}
```
这样，我们就可以在渲染进程中使用：
```tsx
import { a } from '@shared/index';
console.log("test shared a:", a);
```
### 主进程中使用
同样我们需要在 `electron/tsconfig.json` 中加上 `includes: [...,'../shared/']`，我们也可以配置上别名：
```json
"paths": {
"@shared/*": ["../shared/*"]
}
```
tsconfig.json 中的配置便于给代码编辑器识别。在实际运行时，由于主进程是通过 babel 编译，因此 babel 里的别名也需要配置。
我们在 modern.config.js 中配置：
```js
...
electron: {
...,
babel: defaultConfig => {
defaultConfig.plugins.push([
require.resolve('babel-plugin-module-resolver'),
{
root: ['./'],
alias: {
'@shared': './shared',
},
},
]);
return defaultConfig;
},
}
```
这样，我们就可以在渲染进程中使用：
```ts-main.ts
import { a } from '@shared/index';
console.log("test shared a:", a);
```
### 构建
在构建**主进程**的时候，我们需要指定编译的额外目录：
```ts
"build:main": "modern build electron-main --extra shared",
```
或者：
```ts
"build:electron": "PLATFORM=mac modern build electron --extra shared",
```
当然，如果有多个目录，可以继续指定，比如：
```ts
"build:main": "modern build electron-main --extra shared xxxx xxx",
```
## 构建时的依赖安装
在构建主进程的时候，我们通过 babel 分析了主进程的依赖，并生成了 package.json，在构建的时候，会基于此 package.json 安装对应的依赖。
但有些时候，我们需要的依赖可能是一种间接的引用，我们可以通过配置来将其识别并放入 package.json 中。比如：我们使用了 xxx@1.0.0 这个包，我们可以在项目根目录下 package.json 中配置：
```ts
"externalDependencies": {
"xxx": "1.0.0"
}
```
这样，我们在生成最终的 package.json 的时候也会将这个 `externalDependencies` 带上，放入最终 package.json 中的 `dependencies` 下。这样在进行最后的构建依赖安装的时候即可安装上。