格式为'es'时如何处理全局？

Question

我已将 Javascript 库（增量-dom）确定为全局库和外部库。我正在脚本标签中加载库。

当汇总格式为 'iife' 时，将库注入到 iife 中，一切正常。

然而，当我使用 'es' 格式时，全局变量从未被引用并且浏览器抛出类型错误：

Uncaught TypeError: Failed to resolve module specifier 'incremental-dom'

这是我的 rollup.config.js 文件：

const path = require('path');
const root = process.cwd();
const string = require('rollup-plugin-string');
const superviews = require('rollup-plugin-superviews');

export default [
  {
    input: path.resolve(root, 'src', 'idx-admin-tab', 'component.js'),
    plugins: [
      superviews({include: 'src/**/*.html'}),
      string({include: ['src/**/*.css', 'src/**/*.svg']})
    ],
    globals: {'incremental-dom': 'IncrementalDOM'},
    external: ['incremental-dom'],
    output: {
      file: path.resolve(root, 'dist', 'idx-admin-tab.es.js'),
      format: 'es'
    }
  }
];

Answer 1

globals 仅适用于 iife 或 umd 输出的上下文 — 如果您正在创建 es 包，它将被忽略。

如果您只想使用浏览器的本机 import 支持，则必须将模块说明符 incremental-dom 转换为浏览器可以解析的说明符 — 如下所示：

export default [
  {
    // ...
    external: ['incremental-dom'],
    paths: {
      'incremental-dom': '/node_modules/incremental-dom/dist/incremental-dom.js'
    },
    // ...
  }
];

不幸的是，incremental-dom 没有 ESM 构建，所以你不能 import 它。所以如果你不想捆绑它，即使在 es 模式下，你也必须欺骗 Rollup 使用全局 IncrementalDOM。

你应该可以用 rollup-plugin-virtual:

export default [
  {
    // ...
    plugins: [
      superviews({include: 'src/**/*.html'}),
      string({include: ['src/**/*.css', 'src/**/*.svg']}),
      virtual({
        'incremental-dom': 'export default window.IncrementalDOM'
      })
    ],
    // ...
  }
];

格式为'es'时如何处理全局？

How to handle global when format is 'es'?

rollupjs