Question

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

最好的方法是什么？

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

Answer 1

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

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

我找到的解决方案（感谢GitHub user rokob与Rollbar.js项目）是引用NODE_ENV文件中的index.html变量，如下所述：{{3} }

在index.html文件的顶部，在<script>标记中，我可以将变量设置为%NODE_ENV%。 create-react-app的构建过程将自动解析该变量并插入环境名称，例如＆＃34;生产＆＃34;或者＆＃34;开发＆＃34;，在最终的index.html文件中。然后，我可以检查该变量是否等于＆＃34;生产＆＃34;在执行任何内联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的特定情况下，我只需要传递一个带有环境名称的config参数，因此不需要if语句：

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

以下是Github上的问题：rokob给了我这个解决方案：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html

Answer 2

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

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

您可以调用构建命令，就像使用NODE_ENV var一样：

NODE_ENV="production" npm run build

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

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

2 个答案: