且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用 RequireJS 加载 plotly 和 D3

更新时间:2023-12-05 16:10:22

Plotly 需要一个 shim,因为它依赖于 D3,根据 Plotly 文档,看起来还需要 jQuery.您的配置应如下所示:

You need a shim for Plotly since it depends on D3, and according to the Plotly docs, it looks like jQuery is also needed. Your config should look like:

/*
main.js file
*/
require.config({
  paths: {
    d3: '/static/scripts/plotly/dependencies/d3.v3.min',
    jquery: '/path/to/jquery',
    plotly: '/static/scripts/plotly/plotly.min'
  },

  shim: {
    plotly: {
      deps: ['d3', 'jquery'],
      exports: 'plotly'
    }
  }
});

require(['d3', 'plotly'], function(d3, plotly) {
  console.log(plotly); // Object {Lib: Object, util: Object...}
  console.log(d3); // Object {version: "3.5.6", behavior: Object...}
});

在您的 index.html 中,您应该只有一个脚本标签:

In your index.html you should have only a single script tag:

<script data-main="main" src="/path/to/require/folder/require.js"></script>

如果你想在另一个使用 require 的 JS 文件中使用 D3 和 Plotly,那么你应该使用 AMD 样式:

If you want to use D3 and Plotly in another JS file that uses require then you should be using the AMD style:

/*
foo-bar.js
*/
define(['d3', 'plotly'], function(d3, plotly) {
    var foo = {};

    function bar() {
       // Some code here...
    }

    // This will allow other modules to use
    // the foo object and the bar function.
    return fooBar {
        foo: foo,
        bar: bar
    }
});

现在,您可以在另一个模块中使用 foo-bar.js(假设两个文件位于同一目录级别):

Now, you can use foo-bar.js in another module (assuming the two files are on the same directory level):

define(['./foo-bar'], function(fooBar) {
    console.log(fooBar.foo) // Object
    console.log(fooBar.bar) // function() {}
});