如何在 Angular 项目中自定义引用路径

890 阅读2分钟

前言

在项目的开发过程中我们总会出现这样的问题:

import { AModule } from '../../module';
import { BEnum } from '../../../enumFile';
import { CConst } from '../../constsFile';

也就是如果我们的组件嵌套多,子组件想要使用顶层 app 定义的一些全局枚举或者常量以及一些其他数据的时候,使用相对路径引用的时候往往会比较繁杂,并且使引入路径代码看起来很繁琐。

那现在就以 Angular 项目中的解决此问题的方式来解答这种问题。

解决

首先想到的就是使用绝对路径引入不就解决相对路径引入的 /../ 的问题了么:

import { AModule } from 'src/app/module';
import { BEnum } from 'src/app/emum/enumFile';
import { CConst } from 'src/app/constsFile';

当然这也是一种解决问题的方式,但是我们想要的肯定不是这样。

尤其是在 app 路径下,细分了不同的文件后,我们又需要多加一层,比如 src/app/someFolder

所以我们会给路径添加一个别名 alias

webpack 中

webpack.config.js 文件中

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

现在导入就可以从:

import Utility from '../../utilities/utility';

变更为:

import Utility from 'Utilities/utility';

当然还有其他用法,更详细的查看 webpack resolve 的用法

Angular 项目中

虽然我们知道 Angular cli 内部是基于 webpack 实现的,但是默认是没有 webpack 的配置文件 webpack.config.js 的,所以我们需要:

使用 tsconfig.json 来配置。在 angular-cli 生成的项目修改如下:

在根目录下的 tsconfig.json :

{
  // ...
  "compilerOptions": {
    "baseUrl": "./",
    // ...
    "paths": {
      "@shared/*": ["src/app/shared/*"],
      "@app/*": ["src/app/*"]
    }
  }
}

然后在使用到的地方就可以从别名引入了:

import { OffsetUnit } from '@shared/constants';

如果 VScode 提示 找不到模块“@shared/constants”或其相应的类型声明 可以通过重启 VScode 来解决此问题。

总结

学好 webpack,走天下。