我正在尝试添加一个JavaScript库,该库仅包含在由create-react-app生成的生产构建文件中。
最佳方法是什么?
具体来说,我正在尝试包含Rollbar.js客户端错误监控库。 我不希望它在开发/测试环境中每次出现错误时都触发,因此我只想将其包含在运行npm run build
时生成的文件中。
我正在尝试添加一个JavaScript库,该库仅包含在由create-react-app生成的生产构建文件中。
最佳方法是什么?
具体来说,我正在尝试包含Rollbar.js客户端错误监控库。 我不希望它在开发/测试环境中每次出现错误时都触发,因此我只想将其包含在运行npm run build
时生成的文件中。
import
语句加载的,因此我无法在index.js
顶部使用require
语句。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>
if
语句。var _rollbarConfig = {
...
enabled: ('%NODE_ENV%' === 'production') //returns true if 'production'
...
};
这是Github上的问题,rokob给了我这个解决方案:https://github.com/rollbar/rollbar.js/issues/583
if (process.env.NODE_ENV === 'production') {
const Rollbar = require('rollbar');
}
NODE_ENV
变量来调用构建命令:NODE_ENV="production" npm run build
import
语法。index.js
文件中在其他import
语句之前添加const Rollbar = require('rollbar');
时,会出现错误。 - MattSidor
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 - MattSidorimport
语句必须始终首先声明。请参见-https://dev59.com/AFsX5IYBdhLWcg3wHshv。如果您怀疑,请使用create-react-app CLI创建一个应用程序,并尝试在index.js
的import
语句之前插入const Rollbar = require('rollbar');
。 - MattSidor