使用react-chartjs-2 CDN“进程未定义”

Question

我想在组件中使用ChartJS，并注意到它也有一个CDN以及react-chartjs-2。

Uncaught ReferenceError: process is not defined
    at react-chartjs-2.js:80
    at react-chartjs-2.js:4
    at react-chartjs-2.js:5

第80行是：

if (process.env.NODE_ENV !== 'production') {
  validateFormat = function validateFormat(format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

第1-5行：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('chart.js')) :
    typeof define === 'function' && define.amd ? define(['exports', 'react', 'chart.js'], factory) :
    (factory((global.ReactChartjs2 = {}),global.React,global.Chart));
}(this, (function (exports,React,Chart) { 'use strict';

在HTML中，脚本如下：

        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-chartjs-2/2.9.0/react-chartjs-2.js"></script>

我真的没有找到很多关于CDN的信息，所以我想知道这些CDN是不是不能一起工作，或者我是否遗漏了什么。

Answer 1

与大多数React组件一样，该库本身并不支持浏览器。它假设它是在一个构建工具环境(即Node.js)中，所以它认为已经有一个全局process对象。这是开发人员的疏忽，但您的用例相对较少，因此他们不会对其进行测试。

您需要使用构建工具，如Webpack、Rollup或Parcel才能使用该库。

PS:为了减小捆绑包大小，您应该使用.min.js CDN而不是.js，也就是让URL为https://cdnjs.cloudflare.com/ajax/libs/react-chartjs-2/2.9.0/react-chartjs-2.min.js。