小编ee2*_*Dev的帖子

我正在准备一个 Reveal.js 演示文稿，我想在其中展示一些代码行。

如果我只有一张包含代码的幻灯片，它将显示在带有滚动条的面板中，其中包含完整的代码：

但是，如果我在代码块前面加上标题：

<section id="slide-12">
<h3>Example 1: my first d3 visualization</h3>
<pre><code>
&lt;!DOCTYPE html&gt;
  <meta charset="utf-8"> <!-- also save this file as unicode-8 ! -->
  &lt;head&gt;
    <script src="http://d3js.org/d3.v3.js"></script>
  &lt;/head&gt;

  &lt;body&gt;
    <h1>My meetup groups are:</h1>
    <svg width="500" height="500"></svg>

    <script>    
      var meetupGroupSizes = [1943, 1073, 297];

      function display(mydata){
        var anchor = d3.select("svg");

        selection = anchor.selectAll("circle")
          .data(mydata);

        selection.style("fill", "orange"); // update selection

        selection.enter() // enter selection
          .append("circle")
          .attr("cx", function (d, i) { return (i + 1) * 100;})
          .attr("cy", 300)
          .attr("r", …

我在 Javascript 中创建不同的 L 形路径。它们的长度和位置不同。我想有一个 linearGradient 作为它们的笔触，其中第一个停止偏移位于 x=10 像素的位置，即颜色的变化总是在 x 像素之后开始。

使用渐变的标准方式只是提供相对定位（例如，对象边界框）。由于不同的对象边界框，这会导致不同的停止偏移。

这是一个示例：

  path.p1 {
    fill: none;
    stroke-width: 20px;
  }

<svg height="600" width="1000">


  <path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
  <path class="p1" d="M150 10 V 100 H 200 " stroke="url(#cl1)"/>
  <path class="p1" d="M250 10 V 100 H 400 " stroke="url(#cl1)"/>

    <defs>
        <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
            <stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
        </linearGradient> …

我用 javascript 编写了一个前端动画，其逻辑被分割到多个 javscript 文件中。我想基于 ES6 模块将这些文件捆绑在一起，至少是我自己编写的文件。

问题是这样的：

import { Webfont } from "webfontloader";

...

function animate(myText){
    WebFont.load({
        google: { families: ["Indie Flower"]},
        fontactive: function(familyName, fvd){ //This is called once font has been rendered in browser
            display(myText);
        },
    });
}

我导入了依赖模块，但是一个模块（webfontloader）包含窗口对象。当它在浏览器中运行时这很好，但是当我使用 npm 和 rollup.js 构建并捆绑它时，它会抛出错误：

   ReferenceError: window is not defined

如何在不接触外部库“webfontloader”的代码的情况下解决这个问题？

我还有两个选择吗？

• 选项 a）将我的所有文件捆绑在一起并将外部库保留在外部。在生产中，它们将作为单独的脚本标签包含在内。
• 选项 b) 将所有文件捆绑到一个文件中