react-chartjs-2 CDN 中的“流程未定义”答案

【问题标题】："Process is not defined" with react-chartjs-2 CDNreact-chartjs-2 CDN 中的“流程未定义”
【发布时间】：2020-04-09 06:17:07
【问题描述】：

我专门为仪表板页面上的一个组件使用 React CDN。我想在组件中使用 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 是否不能一起工作，或者我是否缺少某些东西。

我们将不胜感激。

【问题讨论】：

标签： javascript reactjs chart.js cdn react-chartjs

【解决方案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。

【讨论】：