utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
151 lines (113 loc) • 3.14 kB
Markdown
---
title: 别名、环境变量和全局变量
sidebar_label: 别名、环境变量和全局变量
sidebar_position: 1
---
## 使用别名
Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:
```js
{
'@': '<appDirectory>/src',
'@shared': '<appDirectory>/shared',
}
```
:::info 注
在开启可选功能时，生成器也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名：
:::
`src/` 目录结构如下时，从 `src/App.tsx` 文件中导入 `src/common` 目录下的模块:
```bash
.
├── common
│ ├── styles
│ │ └── base.css
│ └── utils
│ └── index.ts
├── App.tsx
```
`src/App.tsx` 中写法如下:
```ts
import utils from '@/src/common/utils';
import '@/src/common/styles/base.css';
```
Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例，对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths` 如下:
```json
{
"compilerOptions": {
"paths": {
"@/*": [
"./src/*"
],
"@/common/*": [
"./src/common/*"
]
}
},
}
```
JavaScript 项目可以在 `modern.config.js` 中配置 [`source.alias`](/docs/apis/config/source/alias):
```js title="modern.config.js"
export default defineConfig({
source: {
alias: {
'@common': './src/common'
}
}
});
```
具体别名配置可以参考 【[API 资料 - source.alias](/docs/apis/config/source/alias)】。
## 使用环境变量
默认情况下，在前端代码中可以直接使用 `NODE_ENV` 环境变量，如下:
```js
if (process.env.NODE_ENV === 'development') {
// do something
}
```
执行 `dev` 命令之后可以看到构建产物如下:
```js
if (true) {
// do something
}
```
同样在自定义的 HTML 模板中，也可以直接使用环境变量。如 `config/html/head.html`:
```js
<meta name="test" content="<process.env.NODE_ENV>">
```
如果想在代码中使用除 `NODE_ENV` 以外的环境变量，可以在 [`source.envVars`](/docs/apis/config/source/env-vars) 配置指定, 如下:
```js title="modern.config.js"
export default defineConfig({
source: {
envVars: ['VERSION']
}
})
```
`VERSION` 环境变量需要在编译之前设置好, 可以在执行命令时添加:
```bash
// linux, macOS
$ VERSION=1.0.0 npm run dev
// windows
$ set VERSION=1.0.0&&npm run dev
```
Modern.js 也支持在 `.env` 文件中定义环境变量：
```js title=".env"
VERSION=1.0.0
```
更多文件格式：
* `.env`：默认加载。
* `.env.development`、`.env.test`、`.env.production`：针对具体环境设置环境变量，会覆盖 `.env` 中的设置。
## 使用全局变量
Modern.js 支持在编译时设置代码中使用到的全局变量:
```js title="modern.config.js"
export default defineConfig({
source: {
globalVars: {
VERSION: '1.0.0'
}
}
})
```
在代码中可以直接使用:
```ts title="App.tsx"
/* TS 应用中，需要声明该变量 */
declare const VERSION: string;
const a = VERSION;
```