Как связать файлы javascript с одной внешней библиотекой с помощью rollup.js? - PullRequest
Новая
       42

Как связать файлы javascript с одной внешней библиотекой с помощью rollup.js?

0 голосов
/ 05 мая 2018

Я создал файл helloWorld.js, в котором используется объект WebFont из пакета webfontloader. Моя цель - связать мой файл 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({

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 05 мая 2018

Думаю, я наконец-то понял!

Приведенный выше подход требует следующих двух изменений:

  • в [rollup.config.js]: добавить «webfontloader» как внешний, но не как глобальный
  • в [helloWorld.js]: изменить оператор импорта на «импортировать Webfont из« 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/**"})
  ]
};
...