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

Question

有没有办法在React应用程序中使用Google Charts？我找到了反应谷歌图表,我已经有点工作,但它似乎缺乏谷歌图表的大部分API,或者至少是没有记录的.我也有点害羞在生产中使用NPM统计数据显示在最后一天只有约400次下载.

但是,我无法单独在NPM上找到谷歌图表,也不能仅仅import Charts from 'google-charts'像我最初预期的那样.

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

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

Answer 1

使用Webpack 外部组件
通过将库定义为externalwebpack，只需导出该库的全局符号，就像（对jQuery一样）

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

因此，您可以执行以下操作：

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

2. 在您的webpack配置中添加：

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

3. 并将其导入为：

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

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

对于ReactJS部分，您需要通过以下方式来获取脚本中的本机DOM元素：refs或其他。

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