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

【问题标题】：Can I use Webpack to inject Google Charts into my project?我可以使用 Webpack 将 Google Charts 注入我的项目吗？
【发布时间】：2017-06-02 21:36:54
【问题描述】：

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

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

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

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

【问题讨论】：

我会说每天400次下载实际上是相当不错的。如果没有发布任何问题，则将是一个危险信号。这个模块有 75 个已关闭的问题，25 个打开的问题，所以它似乎是活跃的，在我看来这是一个好兆头。
blog.arkency.com/2014/09/react-dot-js-and-google-charts

标签： javascript charts webpack ecmascript-6 google-web-component

【解决方案1】：

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

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

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

从Charts homepage添加<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>或更新的网址

在你的 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']});

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

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

附：我不是反应家伙所以也许有反应背景的人可能会有所帮助

【讨论】：