javascript - 我可以使用 Webpack 将 Google Charts 注入我的项目吗？

Question

有没有办法在 React 应用程序中使用 Google Charts？我找到了我已经开始工作的react-google-charts，但它似乎缺少很多 Google Charts 的 API，或者至少没有记录。我也有点害羞在生产中使用 NPM 统计数据显示在最后一天只有约 400 次下载的东西。

但是，我无法在 NPM 上单独找到 Google Charts，也无法import Charts from 'google-charts'像我最初预期的那样简单。

我的下一个想法是看看是否有办法将库作为全局变量导入。

1）我该怎么做 2）如果可能的话，我如何将它包含在像这样的反应组件中import { Line } from '???'

score 6 · Accepted Answer

使用 Webpack externals
通过将库定义为externalwebpack，只需导出库的全局符号，就像（比如 jQuery）

{
    1: function(...) {
        // simplified for illustrating
        module.exports = jQuery;
    }
}

所以你可以做类似的事情：

从图表主页添加一个<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>或更新的 url

在你的 webpack 配置中添加：

externals: {
  charts: 'google.charts'  // or any other alias you want, can be a regex too! check Webpack's doc for more
}

并将其导入为：

import chart from 'charts'
// do something!
charts.load('current', {'packages':['corechart']});

确保在加载你的包之前加载谷歌图表。

对于ReactJS部分，您需要一些方法来获取脚本中的本地 DOM 元素，通过使用refs或其他方式。

PS我不是反应人，所以也许有反应背景的人可能会有所帮助

1 回答 1