如何防止汇总将导入语句保留到包中的外部库？

Question

我有这样的网络应用程序：

• 打字稿代码
• rollup 作为捆绑器
• mapboxgl 作为外部库
• 使用es6模块
• 生成一个包含所有打字稿文件但不包含使用单独的脚本标记引用的mapboxgl代码的bundle.js

一切都很好，唯一的问题是bundle.js包含一个错误的

import { Map } from 'mapbox-gl';
// why is this import here, although rollup.config declares mapbox-gl external?

... bundle code follows as expected

在它的头上。

rollup.config.js：

export default {
    input: './js/app.tsx',
    output: [
        {
            file: 'dist/bundle.js',
            format: 'es'
        },
    ],
    external: ['mapbox-gl'], // this should prevent imports from mapbox-gl in the bundle
    plugins: [
        typescript()
    ],
}

我搜索了所有 stackoverflow 和无尽的 github 存储库，但没有揭示为什么留下这个 import 语句。我在 rollup 中打开了一个功能请求，以允许创建纯 js 包，因为我相信 rollup 是正确的，因为它假设该包用作模块 - 格式最终设置为“es”。

https://github.com/rollup/rollup/issues/3868

Answer 1

我遇到了这个问题。@rollup/plugin-node-resolve修复。

Rollup 默认情况下不会查找并捆绑 Node 依赖项。默认情况下，Rollup 遵循 vanilla ES 模块规范，该规范对 node_modules 内部的 Node.js 依赖关系一无所知。添加此插件使 Rollup 查找 node_modules 中的包，因此它将不再将它们视为“外部”，并将捆绑它们而不是将它们视为外部。

OP：你不希望 Mapbox 是“外部的”。从 Rollup 的角度来看，“外部”模块是不会包含在您的捆绑包中的模块。在您的情况下，mapbox已经是外部的，但您希望将其设置为内部（包含在）您的包中，这就是该插件的作用。