限制 monorepo 中的不规范导入路径

情景重新

在 monorepo 项目中从a包导入b包的某个模块时候, ide智能提示可能不会使用包名导入, 而是采用据具体路劲。例如, 你在使用一个button组件, ide识别到帮你自动导入时候:

import { Button } from 'packages/ui/src/button'

而不是你期望的

import { Button } from '@mono/ui'

虽然大多数时候, 上面两种方式都可以正常工作, 但是为了不必要的麻烦(例如babel按需导入), 建议还是采用 import { Button } from '@mono/ui', 但是 import { Button } from 'packages/ui/src/button' 也不会报错, 所以这个时候我想到了使用eslint规则进行约束。

准备工作

找个现成的规则, no-restricted-imports

配置

{
  "rules": {
    "no-restricted-imports": ["error", {
      "patterns": [
        {
          "group": ["packages/**"],
          "message": "Do not import from packages directory, please use \"@mono/*\" instead."
        }
      ]
    }]
  }
}

使用

普通导入

假设项目目录如下：

package.json

app/package.json 包名为 @mono/app packages/ui/package.json 包名为 @mono/ui

在@mono/app中下面这种方式导入Button将会报错

import { Button } from 'packages/ui/src/button'

danger

'packages/ui/src/button' import is restricted from being used by a pattern. Do not import from packages directory, please use "@mono/*" instead.eslintno-restricted-imports

你应该这种方式导入

import { Button } from '@mono/ui'

从模块入口导入而不是从具体的文件导入

{
  "rules": {
    "no-restricted-imports": ["error", {
      "patterns": [
        {
          "group": ["test/**"],
          "message": "Do not import from packages directory, please use \"test\" instead."
        }
      ]
    }]
  }
}

假设test项目目录如下：

bar.ts

foo.ts

index.ts

test/index.ts内容如下：

test/index.ts

export * from './bar'
export * from './foo'

你应该使用下面这种方式导入

import { bar } from './test'

而不是：

import { bar } from './test/bar'