如何将javascript文件与一个带有rollup的外部库捆绑在一起.js?

我创建了一个helloWorld.js文件，该文件使用webfontloader包中的对象WebFont。我的目标是将我的 helloWorld.js 文件捆绑成一个捆绑包.js然后是一个静态网站，该网站为 webfont 文件和捆绑.js文件具有单独的脚本标记。问题只是结果捆绑包中的一行代码.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/**"})
]
};

我的索引.js文件包含以下行：

export { chart } from "./src/helloWorld";

生成的捆绑包.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({

任何帮助将不胜感激！

我想我终于想通了！

上述方法需要以下两个更改：

在 [rollup.config.js] 中：将"webfontloader"添加为外部而不是全局
在 [helloWorld.js] 中：将导入语句从 "webfontloader" 更改为 ìmport Webfont;

以下是两个文件：你好世界.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/**"})
]
};

相关内容

最新更新

热门标签：