首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在reactjs中的公共html文件中创建条件外部脚本引用。即一个用于生产,一个用于试运行

在ReactJS中,可以通过在公共HTML文件中创建条件外部脚本引用来实现在生产环境和试运行环境下使用不同的脚本。

首先,我们需要在公共HTML文件中添加一个条件判断,以确定当前环境是生产环境还是试运行环境。可以使用环境变量或其他方式来判断。

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>

  <!-- 判断当前环境 -->
  <script>
    if (process.env.NODE_ENV === 'production') {
      document.write('<script src="production.js"><\/script>');
    } else {
      document.write('<script src="development.js"><\/script>');
    }
  </script>
</body>
</html>

在上面的代码中,我们使用了process.env.NODE_ENV来判断当前环境。在生产环境中,process.env.NODE_ENV的值通常会被设置为'production',而在试运行环境中,它的值可以是其他任意值。

根据当前环境的判断结果,我们使用document.write方法来动态地插入不同的脚本文件。在生产环境中,我们引用了production.js脚本文件,而在试运行环境中,我们引用了development.js脚本文件。

接下来,我们需要在项目中准备好这两个脚本文件。可以根据实际需求来编写这两个脚本文件的内容。

最后,将这两个脚本文件放置在公共HTML文件所在的目录中,并确保它们的文件名与上述代码中引用的文件名一致。

这样,在生产环境中,React应用将会引用production.js脚本文件;而在试运行环境中,React应用将会引用development.js脚本文件。

请注意,上述代码中的脚本引用路径是相对于公共HTML文件的路径。如果你的脚本文件位于不同的目录中,需要相应地调整引用路径。

希望这个答案能够满足你的需求。如果你需要更多关于ReactJS或其他云计算领域的问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 面试必知必会 Day8

这个方法将把常规 HTML 输出为一个字符串,然后可以作为服务器响应一部分放在页面主体内。在客户端,React 检测到预渲染内容,并无缝地衔接该内容。 2....如何在 React 启用生产模式?...超越 ES6 语言额外功能,如对象传播操作者。 自动前缀 CSS,所以你不需要 -webkit- 或其他前缀。 一个快速交互式单元测试运行器,内置支持覆盖率报告。...一个实时开发服务器,对常见错误发出警告。 一个构建脚本用于捆绑 JS、CSS 和图片,并提供哈希和源码图。 4. 安装生命周期方法顺序是什么?...当一个组件实例被创建并插入到 DOM 时,生命周期方法按以下顺序被调用。

2.4K40

2024年3月份最新大厂运维面试题集锦(运维15-20k)

它们用于创建具有特定特性类,例如注册子类或修改类属性。 45. Python深拷贝与浅拷贝区别是什么? 浅拷贝创建一个新对象,但不递归地复制对象内部引用对象。...深拷贝不仅复制了对象,还递归地复制了对象所有引用对象。 46. 什么是Python上下文管理器,它是如何工作? 上下文管理器是支持with语句对象,用于为代码块设置前置条件和后置条件。...在脚本检查并使用可用命令和工具版本。 使用条件语句处理不同环境可能差异。 72. 解释什么是子Shell以及如何在Shell脚本创建它。...解释如何在Shell脚本处理文件和目录。 答案: Shell脚本提供了多种处理文件和目录命令,cp(复制)、mv(移动)、rm(删除)、mkdir(创建目录)等。...VPN(虚拟私人网络)通过在公共网络(互联网)上创建一个安全、加密连接,使得远程用户和网站之间通信就像是在一个私人网络内部进行一样。 100. 什么是云计算多租户?

53410

2022年全栈开发者需要熟悉了解知识列表

这是在计算机操作系统上执行操作(例如启动 PHP 服务器、创建目录、执行脚本、更改文件权限等)最直接和最快方式… 18....JSX 允许你在 ReactJS 编写 HTML。 3. JSON JSON 是 JavaScript Object Notation 缩写。...它们为你数据创建加密隧道,通过使用代理服务器隐藏你 IP 地址来保护你在线身份,并允许你安全地使用公共 Wi-Fi 热点。 10....Git Git 用于跟踪文件和目录变化。Git 通常用于在软件开发过程协调开发人员协作开发源代码工作。 16....Git Git 是一种用于跟踪任何一组文件变化软件,通常用于在软件开发过程协调开发源代码程序员之间工作。

1.9K31

40道ReactJS 面试问题及答案

ReactJS一个功能强大 JavaScript 库,用于使用构建块创建交互式用户界面。 ReactJS 运行原理是声明式和基于组件方法。...在事件传播方面,React 事件处理与 HTML 事件处理类似。 14. 如何在 JSX 回调绑定方法或事件处理程序?...在 React ,“ref”是一个对象,它提供了一种引用或访问特定 DOM 节点或 React 元素方法。Refs 通常用于与 DOM 命令式交互,例如聚焦输入、获取其尺寸或访问其方法。...引用是使用类组件 React.createRef() 方法或功能组件 useRef() 挂钩创建创建后,可以使用 ref 属性将 ref 附加到 React 元素。...配置生产部署环境变量、安全设置和性能优化。 通过遵循这些架构原则和最佳实践,您可以设计和架构一个结构良好、可扩展且可维护 ReactJS 应用程序,以满足您项目和用户需求。

18510

从零认识webpack4.0,带你走进神秘webpack

比如 publicPath 设置为static 之后,html 页面引用url 会自动加上static <!...,通常情况下,脚本文件会附属于html 文件运行,这时候需要将 打包好脚本文件,注入到html html-webpack-plugin 插件目的是, 以一个html 为模板, 将打包好脚本注入到模板.../',// 模板文件路径 chunk: ['main']// chunk 指定了该模板导入模块,在多页面的配置,可以在该属性配置多个入口中一个或者多个脚本文件 }) 4. mode.../ 开发配置 生产模式下要求: 注重模块大小 开发模式下要求: 调试, 热更新 在生产环境,默认会进行脚本压缩。...6.1 css-loade css-loader 负责解析 CSS 代码,主要是为了处理 CSS 依赖,例如 @import 和 url() 等引用外部文件声明 6.2 style-loade style-loader

45331

何在Ubuntu 14.04上使用Docker和Docker Compose配置持续集成测试环境

CI加快了您开发过程,并最大限度地降低了生产中关键问题风险,但设置并非易事; 自动构建在不同环境运行,其中运行时依赖项安装和外部服务配置可能与本地和开发环境不同。...Python应用程序需要运行两个容器:一个用于应用程序本身,一个用于存储Redis容器,作为应用程序依赖项。...第6步 - 创建测试脚本 现在我们将为Python应用程序创建一个测试脚本。这将是一个检查应用程序HTTP输出简单脚本。该脚本是您可能希望作为持续集成部署过程一部分运行测试类型示例。...首先,我们需要通过创建一个Dockerfile文件来Docker化我们测试脚本。...然后,您可以在docker-compose.test.yml文件sut容器下添加其他容器,引用其他Dockerfiles。

1.9K00

Rust web 前端库框架评测,以及和 js 前端库框架比较

脚本启动时间:ScriptBootUpTtime 度量指标,解析、编译、评估所有页面脚本所消耗时间,单位为毫秒。...笔者在文章《Rust 和 Wasm 融合,使用 yew 构建 web 前端(3)- 资源文件及小重构》中曾提及:yew 生产环境应用。笔者仅是 yew 初学者,理解不很恰当。...根据对官方 API 文档理解,个人认为当前版本(yew 0.18)用于生产环境,是一个不小挑战(包括开发和维护)。...等待发布后,yew 0.19 用于个人或者团队生产环境,是可以接受。 但从 yew 性能评测结果,以及和 reactjs、angularjs 比较来看,是完全可以接受。...当然,所有的评测场景都是有局限性生产环境性能表现,关联到了太多额外因素。所以任何评测结果,都仅只能做为一个参考。 谢谢您阅读,欢迎交流。

5.9K20

何在Ubuntu 16.04上使用Docker和Docker Compose配置持续集成测试环境

CI加快了您开发过程,并最大限度地降低了生产中关键问题风险,但设置并非易事; 自动构建在不同环境运行,其中运行时依赖项安装和外部服务配置可能与本地和开发环境不同。...Python应用程序需要运行两个容器:一个用于应用程序本身,一个用于存储Redis容器,作为应用程序依赖项。...第4步 - 创建测试脚本 现在我们将为Python应用程序创建一个测试脚本。这将是一个检查应用程序HTTP输出简单脚本。该脚本是您可能希望作为持续集成部署过程一部分运行测试类型示例。...首先,我们需要通过创建一个Dockerfile文件来Docker化我们测试脚本。...然后,您可以在docker-compose.test.yml文件sut容器下添加其他容器,引用其他Dockerfiles。

2.5K00

如何对第一个Vue.js组件进行单元测试 (上)

它有测试单个文件组件所需所有实用程序,包括使用Vue Router或Vuex实用程序。   Jest是一个功能齐全试运行器,几乎不需要配置。它还提供了一个内置断言库。   ...Vue CLI 3(我用它来生成样板文件)允许您选择自己喜欢试运行器,并设置好它。如果要使用其他测试运行器(Mocha),请安装Vue CLI 3并生成自己启动项目。...因此,我们只测试我们可以从组件外部访问内容:   交互   道具变化   我们不会直接测试计算属性、方法或钩子(hooks)。这些将通过测试公共接口进行隐性测试。   ...设置spec文件   与常规测试一样,每个组件都有一个spec文件用于描述我们要运行所有测试。   规范是JavaScript文件。...继续创建一个test/unit/Rating.spec.js文件:   4aea51aa75dc9fd742ac5b45450ae3c5.png   我们已经导入了Rating组件和shallowMount

2K20

2024 年必会 10 个 Node.js 新特性,你还不知道就太落伍了!

使用 node:test 运行单个测试 要创建一个测试,可以使用 test 函数,传入测试名称和回调函数。在回调函数定义你测试逻辑。...子测试允许通过 context.test 创建嵌套测试,并发测试则可通过在 describe() 测试套件传入 concurrency: true 实现,适合熟练使用并避免竞争条件情况。...加载多个 .env 文件 Node.js .env 加载器还支持加载多个 .env 文件。当您有不同环境(开发、测试、生产环境变量时,这非常有用。...实现 Node.js 策略模块:分步指南 我们通过一个简单示例演示如何使用 Node.js 策略模块: 创建一个策略文件,该文件为 JSON 格式,指定应用加载策略。...Node.js 完整性策略注意事项 Node.js 运行时没有内置功能生成或管理策略文件,这可能会带来一些困难,管理生产与开发环境不同策略及动态模块导入。

12910

webpack(4.8.3)总结之一

为输出文件打包生成文件所放置目录 例: webpack '....//字体文件配置 ? //html引入图片配置(webpack4会自动匹配打包后图片路径,也就是打包后页面引入图片路径是正确) ?...五、进阶配置 进阶配置主要为讲述css提取、js公共代码提取、js/css优化(官方叫tree-shaking,剔除js没有用到方法及页面没有用到样式) 1、css提取 PS:提取css插件由...css打包后最终只合成一个css }) ] 2、js公共代码提取(针对多入口文件) 例:index.js、app.js都引入了jquery和utils(自己写功能) ?...并且在生成页面的chunks需引入公共代码chunk名称,特别是manifest模块(webpack自身脚本),如不引入,所有的脚本将不执行 ? ?

78240

一套测试用例如何实现支持多个环境运行

在RF框架下,实现此类需求,总原则是利用:外部变量文件+全局动态变量,将接口测试脚本涉及传入域名值统一封装抽离为一个统一公共环境变量,并且将各个不同环境域名统一存放到一个公共环境配置变量文件。...1.1 通过外部变量文件引入 (1)定义好接口测试实战项目的目录结构,在Resource | Lib 目录下,创建环境配置变量文件文件名称定义为config.py,文件内容如下: # coding=utf...需要注意是,在同一个项目下,不同环境下接口服务地址需要采用相同变量名称,定义好后,在Robot Framework测试脚本中直接通过${URL}变量形式来引用环境变量值。...(3)config.py变量文件导入成功后,当需要在不同环境下运行接口测试用例时,可在用例脚本不做任何变更情况下,只需要更改config.py配置文件地址即可实现一键切换接口测试运行环境。...在Robot Framework还在一种更便捷灵活方式来实现此目的,通过全局参数变量引用形式来实现对应变量值全局动态修改。而采用参数变量引用形式来实现变量值动态修改,也分为两种方式。

2K229

webpack(4.8.3)总结

为输出文件打包生成文件所放置目录 例: webpack '....2)、——dirname为node对象,意思为当前目录下 3)、[name]指向entrykey值,index、app 4、module:配置依赖,需使用什么依赖来编译需要打包文件 ?...//字体文件配置 ? //html引入图片配置(webpack4会自动匹配打包后图片路径,也就是打包后页面引入图片路径是正确) ?...css打包后最终只合成一个css }) ] 2、js公共代码提取(针对多入口文件) 例:index.js、app.js都引入了jquery和utils(自己写功能) ?...并且在生成页面的chunks需引入公共代码chunk名称,特别是manifest模块(webpack自身脚本),如不引入,所有的脚本将不执行 ? ?

69440

2021年React学习路线图

React 从入门到精通,你要知道都在这。 React 是最流行 JavaScript 库之一,用于创建动态网页应用。背后有大量社区支持和活跃开发团队。...下默认配置文件到项目 config 和 scripts 目录,便于自定义应用配置项、和编译打包脚本),深入了解 React 代码是怎样转换并运行在浏览器上。...用 JSX 渲染一个元素: https://zh-hans.reactjs.org/docs/rendering-elements.html 内嵌 JavaScript 表达式: https://zh-hans.reactjs.org...当状态数据发生改变时,组件会再次渲染,来更新这些变更。你要理解这几个基础概念。 学习这些概念时,毫无疑问你将遇到条件渲染和从列表渲染多个组件。此时,你应该创建一个简单 React 应用。...编写测试很重要,根据我经验,通常比编写实际代码更难。 您应该学习最流行测试库, Jest 和 Enzyme,以及如何使用库( Sinon )模拟 API 调用。

7.5K21

实战|如何在Linux 系统上免费托管网站

动动发财小手,点个赞吧! Web 服务器可用于指代硬件和软件,或者两者一起工作。出于本指南目的,我们将重点关注软件方面,并了解如何在 Linux 机器上托管网站。...依赖 要按照本指南进行操作,请确保您具备以下条件。 可以从您 ISP 获取专用公共 IP 地址。 Linux 盒子,可以是您首选操作系统变体 Linux 服务器安装。...PHP 是 PHP 超文本预处理器递归缩写,它是一种流行通用脚本语言,主要用于 Web 开发。...; 接下来,创建一个数据库用户并将数据库上所有权限分配给该用户。...正确执行端口转发后,您现在可以通过公共 IP 地址访问网络外部 Web 服务器。 总结 在本指南中,我们演示了如何在 Linux 机器上使用 Apache 自行托管 Web 服务器。

22520

vue面试题 vue-cli相关知识点(一)

6、创建一个emit.js文件用于vue事件机制管理。 7、webpack:模块加载和vue-cli工程打包器。 vue-cli 工程常用 npm 命令有哪些?...npm run build 用于查看 vue-cli 生产环境部署资源文件大小 npm命令: npm run build --report 请说出vue-cli工程每个文件夹和文件用处 1、build...文件夹:用于存放 webpack 相关配置和脚本。...- assetsRoot:配置打包后生成文件名称和路径 - assetsPublicPath:配置 打包后 .html 引用静态资源路径,一般要设置成 "./" - productionGzip...JS文件里面 devDependencies:开发环境依赖包名称和版本号,这些 依赖包 只用于 代码开发 时候,不会打包进 生产环境js文件 里面。

1.7K31

面向 C++ 现代 CMake 教程(三)

然而,有一个值得注意例外——类型、模板和外部内联函数可以在多个翻译单元重复定义,如果它们完全相同(,它们标记序列相同)。...这使我们能够引入另一个可执行文件,它运行测试针对是将在生产中运行完全相同机器代码。 现在我们已经知道了如何链接,我们可以检索外部库并将其用于我们 CMake 项目中。...首先,让我们看看我们如何在代码中使用一个创建子模块。 为了这个例子,我决定写一个小程序,从 YAML 文件读取一个名字,并在欢迎消息打印出来。...这些测试代码用于检查另一段代码(生产中使用代码)是否正确运行。正如其名,自动化测试应该在每次有人做出改动时无需提示地执行。...更重要是,你将用非常少投入获得一个更强大试运行工具。 如何在一个已经配置项目上使用 CTest 执行测试?

21700

十六:开发模式和生产模式·实战

熟悉 Vuejs 或者 ReactJs 脚手架朋友应该都知道:在根目录下有一个/build/文件夹,专门放置webpack配置文件相关代码。...不像我们前 15 节课 demo (只有一个配置文件webpack.config.js),为了分离开发环境和生产环境,我们需要分别编写对应webpack配置代码。...如何合并 webpack 不同配置? 根据前面所讲,我们有 3 个配置文件。那么如何在build/webpack.common.conf.js引入开发或者生产环境配置,并且正确合并呢?...项目文件 如果这个 js 文件是项目中脚本文件,那么可以访问process.env.NODE_ENV这个变量来判断环境: if (process.env.NODE_ENV === "development...7.2 跑起来:生产模式 按Ctrl+C退出开发模式后,运行npm run build,如下图打包成功: 打包后文件也放在了指定位置: 直接点击index.html,并且打开浏览器控制台: ok

71120
领券