如何使用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]中：将导入语句从“ webfontloader”更改为“ mport Webfont”；

这是两个文件：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文件与一个外部库捆绑在一起？

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-05-05 09:44:24

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-05-05 09:44:24

解决方案1
0 已采纳 2018-05-05 09:44:24