使用 CDN 时使用没有“require”的库

Question

我想用这个Chart JS reactJs wrapper library。

我正在使用library from a CDN，因为我没有为此项目设置任何模块捆绑流程。我知道我可以，但想知道如何在不使用 require 的情况下使用这个库。我认为对于那些仍然对一些较新的 js 实践感到不舒服的人来说，解释如何做到这一点的答案会很有用。

在 react wrapper Chart JS 示例中，您将看到它显示：

var LineChart = require("react-chartjs").Line;

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

如果没有require，在使用CDN 时是否可以为LineChart 分配相同的值？

Answer 1

只需查看 CDN 提供的文件并自行查找。

它有这种形式：

(function (root, factory) {
    // Do some stuff to detect the environment
    // When everything fails, just assign a global variable:

    root["react-chartjs"] = factory(root["React"], root["ReactDOM"], root["Chart"]);


})(this, function ( ... ) {
    ....
});

其中root 是全局对象（浏览器中的window），factory 只是一个获取依赖项并返回库的函数。

获取LineChart：

window['react-chartjs'].Line

记住factory 需要React、ReactDOM 和Chart。并假设所有这些都在一个以相同方式命名的全局变量中。