我如何在Rollup.js中更改依赖包的导入模块到替换该模块的本地文件?

Question

我有一个JavaScript项目，必须使用Rollup.js捆绑，它依赖于包a，而包a又依赖于包B:

"mypackage"——进口比;"A"——进口比;"B">

假设我的包导入一个函数"connect"从包A中导入一个"连接"。模块b导出的函数，例如:

//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，它当然导出"连接"函数)?

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

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

是这样的东西可能与Rollup或插件?对于这个问题，我很抱歉，但是我对rollup和bundle还是个新手。

Answer 1

我使用我的软件包package.json和rollup插件@rollup/plugin-node-resolve的一些配置来解决这个问题。

在包中。我插入了browser选项，该选项指定了当我的包在浏览器上下文中使用时模块应如何解决。从package.json的browser选项的npm文档中:

如果你的模块是用于客户端，浏览器字段应该使用，而不是主字段。这有助于提示用户它可能依赖于Node.js模块中不可用的原语。(如窗口)

所以考虑到原始问题中提供的例子，npm包包含如下内容:

{
  "name": "mypackage",
  "version": "1.5.1",
  "description": "A brand new package",
  "main": "index.js",
  "browser": {
    "B": "./B.bundle.js"
  },
}

这意味着当在浏览器的上下文中使用myppackage时，模块B导入将从位于"/B.bundle.js"中的文件加载。

现在，使用rollup，我需要指定我正在创建的bundle用于浏览器上下文。处理节点模块导入的插件是@rollup/plugin-node-resolve。有一个选项是这个插件，指定上下文是browser。关于browser选项的插件文档:

如果为true，指示插件在package中使用浏览器模块分辨率。如果不存在'browser'，就在exportConditions中添加'browser'，以便应用导出中的浏览器条件。如果为false，包文件中的任何浏览器属性都将被忽略。或者，一个'browser'值可以同时添加到mainFields和exportConditions选项中，但是这个选项优先于mainFields。

所以在我的rollup配置文件中，我有这样的内容:

// rollup.config.js
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import nodePolyfills from "rollup-plugin-node-polyfills";
   export default {
    input: "index.js",
    output: {
      file: "dist/mypackage.bundle.js",
      format: "es",
    },
    plugins: [
      nodePolyfills(),
      resolve({
        browser: true, //<- tells to rollup to use browser module resolution
      }),
      commonjs(),
    ],
  },

@vrajpaljhala的答案似乎是可行的，但我认为@rollup/plugin-replace是一种太棘手和原始的方法来解决这个问题，因为它涉及到直接替换被""包围的字符串。我们可能会面临一些非常"难以发现"的问题。如果我们要替换的包名是一个可以在代码中作为字符串出现，但不能在import语句上下文中出现的普通单词，则会出现错误。

Answer 2

我们有完全相同的需求，我们使用@rollup/plugin-replace软件包解决了这个问题。

基本上，我们的项目使用单线程结构，但我们没有使用任何工具，如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: ['"', '"'],
    }),
  ]
  ...
  ...
}