如何在 Rollup.js 中将依赖包的导入模块更改为替换该模块的本地文件？答案

【问题标题】：How can I change in Rollup.js an import module of a dependency package to a local file replacing that module?如何在 Rollup.js 中将依赖包的导入模块更改为替换该模块的本地文件？
【发布时间】：2022-08-12 15:50:19
【问题描述】：

我有一个必须使用 Rollup.js 捆绑的 JavaScript 项目，该项目依赖于包 A，而包 A 又依赖于包 B：

\"mypackage\" ---import--> \"A\" ----import----> \"B\"

假设我的包从包 A 中导入了一个函数 \"connect\"，该函数又导入了一个由模块 B 导出的 \"connect\" 函数。类似于：

//mypackage index.js
import { connect } from \'A\'

//A index.js
import { connect } from \'B\'

//B index.js
export function connect() {}

由于我的包需要包 B 的捆绑版本（假设为 \"B.bundle.js\"），我如何配置 Rollup.js 以替换需要 B 的项目的每个依赖项（A 在这种情况下）使用我的本地捆绑版本（即 B.bundle.js，当然也导出 \"connect\" 函数）？

当 Rollup.js 创建我的项目的捆绑版本时，我想实现以下内容：

//A index.js after being processed by Rollup
import { connect } from \'./src/B.bundle.js\'

Rollup 或插件可以实现这样的事情吗？对于这个问题，我很抱歉，但总的来说，我是汇总和捆绑的新手。

标签： javascript npm bundle rollup rollupjs

【解决方案1】：

我们有完全相同的要求，我们使用@rollup/plugin-replace 包解决了它。

基本上，我们的项目使用 monorepo 结构，但我们没有使用任何工具，如 learna 或 workspace 来管理它。所以我们有两个相互依赖的包。我们的ui-kit 使用icons 包用于不同的图标，icons 包使用来自ui-kit 包的Icon 组件。我们刚刚将 ui-kit 的导入替换为本地路径，如下所示：

import replace from '@rollup/plugin-replace';

...
...

export default {
  ...
  ...
  plugins: [
    replace({
      'ui-kit': JSON.stringify('../../../../src/components/Icon'),
      delimiters: ['"', '"'],
    }),
  ]
  ...
  ...
}

【讨论】：