Как настроить сведение. js с плагином d3? - PullRequest
Новая
       12

Как настроить сведение. js с плагином d3?

0 голосов
/ 29 февраля 2020

Я сейчас пишу d3 плагин . Тем не менее, я хочу назвать этот плагин как свойство глобального d3, как в исходном примере: d3.foo() Но когда я это сделаю, мои конфигурации для сворачивания приведут к cla sh ссылок d3.

Вот один минимальный пример (только с одним файлом) для иллюстрации: я скачал оригинальный пример плагина d3 и немного изменил исходный файл foo. js: 

//.src/foo.js
import * as d3 from "d3";

export default function() {
  return d3.select("body").append("div").text(42); 
};

Так вот мой плагин , Он использует функции d3 (d3.select()), поэтому d3 импортируется сверху.

Мой индекс. js выглядит так: 

export {default as foo} from "./src/foo";

Поэтому я экспортирую функцию foo () .

Мой rollup.config. js выглядит следующим образом: 

//rollup.config.js
import babel from "rollup-plugin-babel";

var globals = { 
  "d3": "d3",
};

export default {
  entry: "index.js",
  dest: "build/d3-foo.js",
  format: "umd",
  moduleName: "d3",
  external: Object.keys(globals),
  globals: globals,
  plugins: [
    babel({
      exclude: "node_modules/**"})
  ]
};

Я установил moduleName равным "d3", так как я хочу вызвать свой плагин как d3.foo (). Я также установил глобальные и внешние значения на «d3», поскольку не хочу, чтобы модули d3 связывались с помощью свертки.

Для вызова своего плагина d3 я использую следующий код html: 

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="./build/d3-foo.js"></script>
  </head>
  <body>
    <script>
       d3.foo();
    </script>
  </body>
</html>

Но это не работает, поскольку пространство имен d3 ссылается на библиотеку d3, которая не содержит функцию с именем d3.foo (). enter image description here

Сгенерированный пакет выглядит следующим образом: 

// build/d3-foo.js
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
  (factory((global.d3 = {}),global.d3));
}(this, (function (exports,d3) { 'use strict';

  function foo () {
    return d3.select("body").append("div").text(42);
  }

  exports.foo = foo;

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

})));

Если вместо этого я вызываю moduleName в rollup.config. js любое другое имя (например, d4) Я могу вызвать плагин с помощью d4.foo (), и он работает. Как нужно настроить файл конфигурации накопительного пакета, чтобы он мог называть мой плагин d3.foo, как это предложил Майк Босток в своем блоге?

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

1 Ответ

0 голосов
/ 01 марта 2020

Я нашел решение, как должен выглядеть желаемый финальный пакет, благодаря Майку Бостоку.

В Rollup.config. js можно указать следующее: 

// rollup.config.js
import babel from "rollup-plugin-babel";
import * as meta from "./package.json";

export default {
  input: "index.js",
  external: ["d3"],
  output: {
    file: `build/${meta.name}.js`,
    name: "d3",
    format: "umd",
    indent: false,
    extend: true,
    // banner: `// ${meta.homepage} v${meta.version} Copyright ${(new Date).getFullYear()} ${meta.author}`,
    globals: {d3: "d3"},
    plugins: [
      babel({
        exclude: "node_modules/**"})
    ]
  },
};

... в результате получается следующий пакет: 

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

function foo() {
  return d3.select("body").append("div").text(42); 
}

exports.foo = foo;

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

})));
...