如何防止 rollup 将 import 语句留在包中的外部库中？

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 存储库，但这并没有揭示为什么留下这个导入语句。我在 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 的角度来看，“外部”模块是 not 将包含在您的包中的模块。在您的情况下，mapbox 已经是 外部的，但您希望将其置于内部（包含在）您的包中，这就是这个插件的作用。