Question

我对所有Rollup大师都有疑问。我正在与外部和全局的斗争。如果我有这样的rollup.config.js：

＆＃13;

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'
      },
    }
  },
];

＆＃13;

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

＆＃13;

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 };

＆＃13;

我希望Rollup用const {hyper} = hyperHTML之类的东西替换生成的bundle中的'hyperhtml'语句中的import {hyper}，但事实并非如此。相反，bundle文件看起来与源文件相同。有人可以解释原因吗？

Answer 1

如果我没记错，全局变量只适用于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'
    }
  },
];

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

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

1 个答案: