文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用rollup.js将javascript文件捆绑到一个外部库中？

问如何用rollup.js将javascript文件捆绑到一个外部库中？
EN

Stack Overflow用户

提问于 2018-05-04 23:39:39

回答 1查看 2.2K关注 0票数 0

我已经创建了一个helloWorld.js文件，它使用webfontloader包中的对象WebFont。我的目标是将我的helloWorld.js文件捆绑到一个bundle.js中，然后是一个静态网站，它为Web字体文件和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 });

}));

这会导致错误，因为浏览器中没有webfont加载器对象。

如何调整汇总配置，使之达到以下目的：

function displayNice(selection, myText) {
  WebFont.load({

而不是这样：

function displayNice(selection, myText) {
  webfontloader.WebFont.load({

任何帮助都将不胜感激！

javascript

es6-modules

rollupjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-05 09:44:24

我想我终于明白了！

上述方法需要进行以下两项更改：

在rollup.config.js中:添加“webfont加载器”作为外部，而不是全局的
在helloWorld.js中:将导入语句从“webfont加载器”更改为μmportWeb字体；

下面是两个文件: 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/**"})
  ]
};

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50184322

复制

相似问题

问如何用rollup.js将javascript文件捆绑到一个外部库中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用rollup.js将javascript文件捆绑到一个外部库中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用rollup.js将javascript文件捆绑到一个外部库中？
EN