如何防止汇总将导入语句留给捆绑包中的外部库

Question

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

• 打字脚本代码
• 汇总为bundler
• mapboxgl作为外部库
• 使用es6模块
• 生成一个bundle.js，其中包含所有typescript文件，但不包含用单独的script标记引用的mapboxgl代码

一切都很好，唯一的问题是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是正确的，因为它假设捆绑包被用作模块-for format被设置为"；es"；最后

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

Answer 1

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

默认情况下，汇总不会查找和绑定节点依赖项。默认情况下，Rollup遵循普通的ES模块规范，该规范对Node_modules内部的Node.js依赖关系一无所知。添加这个插件使Rollup在node_modules中查找包，因此它将不再考虑它们"；外部"；并将它们捆绑在一起，而不是将它们视为外部的。

OP：你不希望地图框是"；外部"；。在Rollup看来；外部"；模块是一个不会包含在捆绑包中的模块。在您的情况下，mapbox已经是外部的，但您希望将其作为捆绑包的内部(包含在捆绑包中(，这就是这个插件所做的。