汇总外部变量和全局变量如何与 esm 目标一起使用答案

【问题标题】：How do rollup externals and globals work with esm targets汇总外部变量和全局变量如何与 esm 目标一起使用
【发布时间】：2018-04-20 17:52:53
【问题描述】：

我有一个问题要问所有汇总专家。我正在与外部因素和全局因素作斗争。如果我有这样的 rollup.config.js：

const external = ['hyperhtml'];
const globals = {
  'hyperhtml': 'hyperHTML'
};

export default [
  {
    external,
    input: 'src/foo-bar.mjs',
    plugins: [
    ],
    output: {
      file: 'dist/foo-bar.mjs',
      format: 'es',
      globals,
      paths: {
        hyperhtml: '../node_modules/hyperhtml/min.js'
      },
    }
  },
];

条目（foo-bar.mjs）看起来像这样：

import { hyper } from '../node_modules/hyperhtml/min.js';

class FooBar extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.render();
  }

  disconnectedCallback() {}

  render() {
    hyper(this.shadowRoot)`
    <div>something</div>
    `;
  }
}

customElements.get('foo-bar.mjs') || customElements.define('foo-bar.mjs', FooBar);

export { FooBar };

我希望 Rollup 将生成的包中的 import {hyper} from ‘hyperhtml’ 语句替换为 const {hyper} = hyperHTML 之类的东西，但事实并非如此。相反，捆绑文件看起来与源文件相同。谁能解释一下原因？

【问题讨论】：

您告诉输出为“es”格式。 Rollup 不需要做任何事情。
Rollup 应该是捆绑器，对吧？如果是这样，我希望它甚至可以处理 es6 模块的外部和全局。

标签： rollupjs

【解决方案1】：

如果我没记错的话 globals 只适用于 iife 模块和扩展的 umd 模块，请尝试使用 rollup-plugin-virtual (https://github.com/rollup/rollup-plugin-virtual)

export default [
  {
    input: 'src/foo-bar.mjs',
    plugins: [
        virtual ({
            'node_modules/hyperhtml/min.js': `
                export const hyper = someGlobalNamespace.hyperhtml.hyper;
            `
        })
    ],
    output: {
      file: 'dist/foo-bar.mjs',
      format: 'es'
    }
  },
];

不确定它是否会起作用......

【讨论】：