如何仅在 create-react-app 的生产构建文件中包含 JavaScript 库？答案

【问题标题】：How to include JavaScript libraries only in production build files of create-react-app?如何仅在 create-react-app 的生产构建文件中包含 JavaScript 库？
【发布时间】：2018-02-23 19:36:47
【问题描述】：

我正在尝试添加一个仅包含在由create-react-app 生成的生产构建文件中的 JavaScript 库。

最好的方法是什么？

具体来说，我正在尝试包含Rollbar.js 客户端错误监控库。我不希望每次在开发/测试环境中出现错误时触发它，所以我只希望它包含在运行npm run build 时生成的文件中。

【问题讨论】：

检查process.env.NODE_ENV 是否足够？即有条件的要求？这就是您通常会做的事情，例如仅包含用于开发的 devtools 等。
你能粘贴一些你尝试过的东西吗？
我已经尝试在我的public/index.html 文件中包含他们的“快速启动浏览器”<script>，但是无论我的环境如何，或者我是否在build 中构建了生产文件，它都会运行文件夹。我还尝试根据process.env.NODE_ENV 变量有条件地将const Rollbar = require('rollbar'); 添加到index.js，但我不能在我的其他import 语句之前使用require 语句，并且必须在React 和ReactDOM 之前加载这个特定的库已加载。快速启动浏览器脚本：rollbar.com/docs/notifier/rollbar.js/#quick-start-browser
对不起，我不清楚，我的意思是您应该通过粘贴您尝试过的东西的代码 sn-ps 来修改问题本身。至于脚本标记方法，您可以在构建生产时使用不同的 index.html 文件。我对您的第二个说法持怀疑态度，我想具体看看您尝试了什么，以便我对其进行测试并提出建议。
不过我看到你已经解决了你的问题，所以不用担心 :)

标签： javascript reactjs webpack create-react-app

【解决方案1】：

您可以使用环境变量。例如：

if (process.env.NODE_ENV === 'production') {
  const Rollbar = require('rollbar');
}

您可以像这样使用NODE_ENV var 调用构建命令：

NODE_ENV="production" npm run build

值得注意的是，您不能有条件地使用import 语法。

【讨论】：

我认为他只希望在生产中使用它。
将“开发”更改为“生产”:) ty
谢谢；这很有帮助。但是，Rollbar 必须在任何其他库之前加载，例如反应和反应DOM。当我尝试在 index.js 文件中的其他 import 语句之前添加 const Rollbar = require('rollbar'); 时，出现错误。

【解决方案2】：

tpdietz 提供的答案非常好，可能适用于许多图书馆。

但是，我尝试使用的这个特定库（Rollbar）需要在任何其他 JavaScript（例如 React 和 ReactDOM）之前加载，否则它无法捕获所有错误。由于这些其他库是通过 import 语句加载的，因此我不能在 index.js 顶部的它们前面使用 require 语句。

我找到的解决方案（感谢 GitHub user rokob 和 Rollbar.js 项目）是从 index.html 文件中引用 NODE_ENV 变量，如下所述：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html

在index.html 文件的顶部，在<script> 标记中，我可以将变量设置为%NODE_ENV%。 create-react-app 的构建过程将自动解析该变量并插入环境名称，例如“生产”或“开发”，在最终的 index.html 文件中。然后，我可以在执行任何内联 JavaScript 之前检查该变量是否等于“生产”。

例如index.html:

<!doctype html>
<html lang="en">
<head>
  <script>
    var environment = "%NODE_ENV%";
    if (environment === "production") {
      // code here will only run when index.html is built in production environment
      // e.g. > $ NODE_ENV="production" npm run build
    }
  </script>

在 Rollbar.js 的具体情况下，我只需要传递一个带有环境名称的配置参数，因此不需要 if 语句：

var _rollbarConfig = {
  ...
  enabled: ('%NODE_ENV%' === 'production')  //returns true if 'production'
  ...
};

这是 rokob 给我这个解决方案的 Github 上的问题：https://github.com/rollbar/rollbar.js/issues/583

【讨论】：