如何使用 rollup.js 将 javascript 文件与一个外部库捆绑在一起？

Question

我创建了一个 helloWorld.js 文件，它使用 webfontloader 包中的 WebFont 对象。我的目标是将我的 helloWorld.js 文件捆绑到一个 bundle.js 中，然后是一个静态网站，该网站具有用于 webfont 文件和 bundle.js 文件的单独脚本标签。问题只是结果 bundle.js 中的一行代码，因为它创建了一个我不想要的前缀。

我的网站应该是：

<!DOCTYPE html>
<meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
<head>
  <script src="https://d3js.org/d3.v5.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
  <script src="build/bundle.js"></script>
  <style>            
    h1 {
        color: steelblue;
        font-family: 'Indie Flower', cursive;
    }
  </style>
</head>

<body>
  <script>
    var myChart = hw.chart("hello world!");

    d3.select("body")
      .append("div")
      .attr("class", "chart")
      .call(myChart);
  </script>
</body>
</html>

我的“./src/helloworld.js”文件在这里：

import * as d3 from "d3";
import { WebFont } from "webfontloader";

// export default function main () {
export function chart (myText) {
  "use strict";

  function displayNice( selection, myText){
    WebFont.load({
      google: { families: ["Indie Flower"]},
      fontactive: function(){ //This is called once font has been rendered in browser
        display(selection, myText);
      },
    });
  } 

  function chartAPI(selection) {
    selection.each(function () {
      displayNice(this, myText);
    });
  }

  function display(_selection, _myText) {
    d3.select(_selection)
      .append("div")
      .attr("class", "hwChart")
      .append("h1")
      .text(_myText);
  }
  return chartAPI;
}

我的 rollup.config.js 看起来像：

// rollup.config.js
// import nodeResolve from 'rollup-plugin-node-resolve';
import babel from "rollup-plugin-babel";

export default {
  entry: "index.js",
  dest: "build/bundle.js",
  format: "umd",
  moduleName: "hw",
  globals: { 
    "d3": "d3",
    "webfontloader": "webfontloader"
  },
  plugins: [
    /*
    nodeResolve({ 
      jsnext: true, 
      main: true}),
      */

    babel({
      exclude: "node_modules/**"})
  ]
};

我的 index.js 文件包含这一行：

export { chart } from "./src/helloWorld";

结果 bundle.js 包含导致错误的一行：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3'), require('webfontloader')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3', 'webfontloader'], factory) :
  (factory((global.hw = global.hw || {}),global.d3,global.webfontloader));
}(this, function (exports,d3,webfontloader) { 'use strict';

  // export default function main () {
  function chart(myText) {
    "use strict";

    function displayNice(selection, myText) {
      webfontloader.WebFont.load({
        google: { families: ["Indie Flower"] },
        fontactive: function fontactive() {
          //This is called once font has been rendered in browser
          display(selection, myText);
        }
      });
    }

    function chartAPI(selection) {
      selection.each(function () {
        displayNice(this, myText);
      });
    }

    function display(_selection, _myText) {
      d3.select(_selection).append("div").attr("class", "hwChart").append("h1").text(_myText);
    }
    return chartAPI;
  }

  exports.chart = chart;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

这会导致错误，因为在浏览器中没有 webfontloader 对象。

如何调整汇总配置，以便我得到：

function displayNice(selection, myText) {
  WebFont.load({

而不是这个：

function displayNice(selection, myText) {
  webfontloader.WebFont.load({

如有任何帮助，我们将不胜感激！

Answer 1

我想我终于明白了！

上述方法需要做以下两处改动：

在 [rollup.config.js] 中：添加 "webfontloader" 作为外部而不是全局
在 [helloWorld.js] 中：将导入语句更改为 ìmport Webfont from "webfontloader";

这是两个文件： helloworld.js:

import * as d3 from "d3";
import WebFont from "webfontloader";

// export default function main () {
export function chart (myText) {
  "use strict";

  function displayNice( selection, myText){
    WebFont.load({
      google: { families: ["Indie Flower"]},
      fontactive: function(){ //This is called once font has been rendered in browser
        display(selection, myText);
      },
    });
  } 

  function chartAPI(selection) {
    selection.each(function () {
      displayNice(this, myText);
    });
  }

  function display(_selection, _myText) {
    d3.select(_selection)
      .append("div")
      .attr("class", "hwChart")
      .append("h1")
      .text(_myText);
  }
  return chartAPI;
}

和rollup.config.js：

// rollup.config.js
// import nodeResolve from 'rollup-plugin-node-resolve';
import babel from "rollup-plugin-babel";

export default {
  entry: "index.js",
  dest: "build/helloWorld.js",
  format: "umd",
  moduleName: "hw",
  globals: { 
    "d3": "d3"
  },
  external: ["webfontloader"],
  plugins: [
    /*
    nodeResolve({ 
      jsnext: true, 
      main: true}),
      */

    babel({
      exclude: "node_modules/**"})
  ]
};

如何使用 rollup.js 将 javascript 文件与一个外部库捆绑在一起？

How to bundle javascript files with one external library with rollup.js?

javascript

rollupjs

es6-modules