在 rollup 中配置别名

发表于 分类于 ， ， 本文字数： 1.3k 阅读时长 ≈ 1 分钟

在 rollup 中配置别名需要用到 @rollup/plugin-alias 包。

安装

1
2
3
npm install @rollup/plugin-alias --save-dev
# or
yarn add -D @rollup/plugin-alias

使用

在 rollup.config.js 配置文件 中导入下列配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import alias from '@rollup/plugin-alias';
import path from 'path'

module.exports = {
  plugins: [
    alias({
      entries: [
        { find: 'utils', replacement: '../../../utils' },
        { find: 'batman-1.0.0', replacement: './joker-1.5.0' },
        // __dirName 是 config 所在的目录
        { find: '@', replacement: path.resolve(path.dirname(__dirname), 'src') }
      ]
    })
  ]
}

__dirname 代表根目录，说明参见：http://nodejs.cn/api/globals.html#__dirname

jest 中配置别名

为了使别名支持jest 单元测试，需要对 jest 配置 moduleNameMapper

在 package.json 文件中添加如下配置

1
2
3
4
5
6
7
8
// package 根
{
  "jest":{
    "moduleNameMapper":{
      "^@/(.*)":"<rootDir>/src/$1"
    } 
  }
}

vscode 中别名智能识别

在根目录中创建 jsconfig.json 文件，里面添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
// 此处是根，如果已经存在配置，则去掉外层大括号
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "app/*"
            ]
        }
    }
}

参考

https://www.npmjs.com/package/@rollup/plugin-alias

https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9