如何使用 d3 插件设置 rollup.js？

Question

我目前正在编写一个d3 插件。 但是，我想将此插件称为全局 d3 的属性，如原始示例中所示： d3.foo()但是当我这样做时，我的汇总配置会导致 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 在顶部导入。

我的 index.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()。 我还将 globals 和 external 设置为“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.foo() 的函数的 d3 库。

生成的包看起来像这样：

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

})));

相反，如果我在 rollup.config.js 中调用 moduleName 任何其他名称（例如 d4），我可以使用 d4.foo() 调用插件并且它可以工作。 需要如何调整汇总配置文件才能按照 Mike bostock 在他的博客中的建议将我的插件命名为 d3.foo？

任何帮助将不胜感激！

Answer 1

感谢 Mike Bostock，我找到了所需的最终包的外观解决方案。

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

})));

如何使用 d3 插件设置 rollup.js？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-03-01 20:48:04

如何使用 d3 插件设置 rollup.js？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-03-01 20:48:04

解决方案1
0 已采纳 2020-03-01 20:48:04