如何使用 d3 插件设置 rollup.js?
How to set up rollup.js with a d3 plugin?
我目前正在写一篇d3 plugin。但是,我想将此插件称为全局 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()。我还将全局变量和外部变量设置为 "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() 的函数。
生成的包如下所示:
// 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?
如有任何帮助,我们将不胜感激!
感谢 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 plugin。但是,我想将此插件称为全局 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()。我还将全局变量和外部变量设置为 "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() 的函数。
生成的包如下所示:
// 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?
如有任何帮助,我们将不胜感激!
感谢 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 });
})));