npm 包 rollup-plugin-typescript-path-mapping 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

rollup-plugin-typescript-path-mapping是一款用于将 typescript 中使用的路径映射（Path Mapping）转为相对路径的 Rollup 插件。

路径映射是用于映射某些模块或文件路径到另一个模块或文件路径的机制。在 TypeScript 中，可以在 tsconfig.json 中配置路径映射，如下所示：

-- -------------------- ---- -------
-
  ------------------ -
    ---------- --------
    -------- -
      ------ ------
      --------------- -
        ------------------
      --
      ----------- -
        ---------------
        --------------
      -
    -
  -
-

上述配置中，baseUrl 用于指定的是以哪个目录为基础路径，paths 中定义了多个路径映射，如 @ 指向任意路径（*）；components 指向 app/components 下的路径；shared 指向 app/shared 或 lib/shared 中的路径。

使用路径映射后，我们可以通过简单的模块名来导入模块，而不需要写冗长的相对路径。例如：

import { Button } from '@/components/button'
import { Api } from 'shared/api'

但是使用 rollup 打包时，会出现找不到路径映射的问题，因为 Rollup 默认只识别相对路径。

rollup-plugin-typescript-path-mapping 插件就是用来解决这个问题的。它将 TypeScript 中使用的路径映射转化为相对路径，使得 Rollup 能够正确解析依赖。

安装

使用 npm 安装 rollup-plugin-typescript-path-mapping：

npm install rollup-plugin-typescript-path-mapping -D

使用

将 rollup-plugin-typescript-path-mapping 添加到 rollup 配置中即可：

-- -------------------- ---- -------
------ ---------- ---- ---------------------------
------ ----------- ---- ---------------------------------------

------ ------- -
  -- ------
  ------ ---------------

  -------- -
    -- ---------- --
    -------------

    -- ------
    -------------
  --

  -- ------
  ------- -
    ----- -----------------
    ------- ----
  -
-

配置项

rollup-plugin-typescript-path-mapping 支持以下配置项：

configFile：指定 tsconfig.json 的路径，默认为项目根目录下的 tsconfig.json 文件。
```
pathMapping({
  configFile: './configs/tsconfig.json'
})
```

tsconfig：指定 TypeScript 配置对象，默认为 undefined。

pathMapping({
  tsconfig: {
    baseUrl: '.',
    paths: {
      '@/*': ['src/*']
    }
  }
})

useAbsolutePath：是否使用绝对路径，默认为 false。
```
pathMapping({
  useAbsolutePath: true
})
```
warnUnresolvedImports：是否提示无法解决的导入，默认为 false。
```
pathMapping({
  warnUnresolvedImports: true
})
```

示例代码

以下是一份使用 rollup-plugin-typescript-path-mapping 插件的示例代码。

目录结构：

├── src
│   ├── components
│   │   └── button.ts
│   ├── index.ts
│   └── shared
│       └── api.ts
├── tsconfig.json
└── rollup.config.js

tsconfig.json 配置：

-- -------------------- ---- -------
-
  ------------------ -
    ---------- --------
    -------- -
      ------ ------
      --------------- -
        ------------------
      --
      ----------- -
        ---------------
        --------------
      -
    -
  -
-

rollup.config.js 配置：

-- -------------------- ---- -------
------ ---------- ---- ---------------------------
------ ----------- ---- ---------------------------------------

------ ------- -
  ------ ---------------
  -------- -
    -------------
    -------------
  --
  ------- -
    ----- -----------------
    ------- ----
  -
-

src/components/button.ts：

export const Button = {
  name: 'Button'
}

src/shared/api.ts：

export const Api = {
  name: 'Api'
}

src/index.ts：

import { Button } from '@/components/button'
import { Api } from 'shared/api'

console.log(Button.name)
console.log(Api.name)

在命令行运行 rollup -c 即可打包代码。打包后的 dist/bundle.js 文件中，原先的路径映射都被转化为了相对路径。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056b8b81e8991b448e5603