别名、环境变量和全局变量

使用别名

Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:

{
  '@': '<appDirectory>/src',
  '@shared': '<appDirectory>/shared',
}

在开启可选功能时，生成器也会动态的添加内置别名，例如启用 BFF 时默认会添加 @api 别名：

src/ 目录结构如下时，从 src/App.tsx 文件中导入 src/common 目录下的模块:

.
├── common
│   ├── styles
│   │   └── base.css
│   └── utils
│       └── index.ts
├── App.tsx

src/App.tsx 中写法如下:

import utils from '@/src/common/utils';
import '@/src/common/styles/base.css';

Modern.js 也提供了自定义别名的方式，以添加 @common 别名为例，对于 TypeScript 项目，只需要在项目根目录 tsconfig.json 下配置 compilerOptions.paths 如下:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "@/common/*": [
        "./src/common/*"
      ]
    }
  },
}

JavaScript 项目可以在 modern.config.js 中配置 source.alias:

modern.config.js
export default defineConfig({
  source: {
    alias: {
      '@common': './src/common'
    }
  }
});

具体别名配置可以参考【API 资料 - source.alias】。

默认情况下，在前端代码中可以直接使用 NODE_ENV 环境变量，如下:

if (process.env.NODE_ENV === 'development') {
  // do something
}

执行 dev 命令之后可以看到构建产物如下:

if (true) {
  // do something
}

同样在自定义的 HTML 模板中，也可以直接使用环境变量。如 config/html/head.html:

<meta name="test" content="<process.env.NODE_ENV>">

如果想在代码中使用除 NODE_ENV 以外的环境变量，可以在 source.envVars 配置指定, 如下:

modern.config.js
export default defineConfig({
  source: {
    envVars: ['VERSION']
  }
})

VERSION 环境变量需要在编译之前设置好, 可以在执行命令时添加:

// linux, macOS
$ VERSION=1.0.0 npm run dev

// windows
$ set VERSION=1.0.0&&npm run dev

Modern.js 也支持在 .env 文件中定义环境变量：

.env
VERSION=1.0.0

更多文件格式：

Modern.js 支持在编译时设置代码中使用到的全局变量:

modern.config.js
export default defineConfig({
  source: {
    globalVars: {
      VERSION: '1.0.0'
    }
  }
})

在代码中可以直接使用:

App.tsx
/* TS 应用中，需要声明该变量 */
declare const VERSION: string;

const a = VERSION;