logo标签列表

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

javascriptreactjswebpackcreate-react-app
3

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

最佳方法是什么？

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

检查 process.env.NODE_ENV 是否足够？例如条件要求？这通常是您包含开发工具等仅用于开发的操作方式。 - Samo
我尝试将他们的“快速启动浏览器”<script>包含在我的public/index.html文件中，但是无论我的环境如何或者我是否已经构建了build文件夹中的生产文件，它都会运行。我还尝试根据process.env.NODE_ENV变量有条件地添加const Rollbar = require('rollbar');到index.js中，但是我不能在其他import语句之前使用require语句，并且这个特定的库必须在加载React和ReactDOM之前加载。快速启动浏览器脚本：https://rollbar.com/docs/notifier/rollbar.js/#quick-start-browser - MattSidor
Samo - 在ES2015中，import语句必须始终首先声明。请参见-https://dev59.com/AFsX5IYBdhLWcg3wHshv。如果您怀疑，请使用create-react-app CLI创建一个应用程序，并尝试在index.js的import语句之前插入const Rollbar = require('rollbar');。 - MattSidor
我不怀疑这一点，但你的第一条语句很容易导入一个本地文件，然后在 rollbar 上使用条件性 require。 - Samo
我尝试过这个，但无法使其正常工作。如果你能让它正常运行，请告诉我。 - MattSidor
显示剩余3条评论
2个回答
9
tpdietz提供的答案非常好，对许多库可能非常有效。
但是，我正在尝试使用的特定库（Rollbar）需要在任何其他JavaScript（例如React和ReactDOM）之前加载，否则它无法捕获所有错误。由于这些其他库是通过import语句加载的，因此我无法在index.js顶部使用require语句。
我发现的解决方案（感谢Rollbar.js项目的GitHub用户rokob）是从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文件中插入环境名称，例如“production”或“development”。然后，我可以在执行任何内联JavaScript之前检查该变量是否等于“production”。
示例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'
  ...
};

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

4
你可以使用环境变量。例如：
if (process.env.NODE_ENV === 'production') {
  const Rollbar = require('rollbar');
}

你可以像这样使用NODE_ENV变量来调用构建命令：
NODE_ENV="production" npm run build

值得注意的是，您不能有条件地使用import语法。
我认为他只想在生产环境中这样做。 - Samo
修改了“开发”为“生产” :) 谢谢 - tpdietz
谢谢，这非常有帮助。然而，Rollbar必须在任何其他库之前加载，例如React和ReactDOM。当我尝试在我的index.js文件中在其他import语句之前添加const Rollbar = require('rollbar');时，会出现错误。 - MattSidor
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接