开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

<!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.4K4 0

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

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

3.1K1 0

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

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

2K3 1

40道ReactJS 面试问题及答案

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

5141 0

从零认识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

4673 1

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

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

1.9K0 0

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

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

6.4K2 0

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

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

2.5K0 0

如何对第一个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

2.1K2 0

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 运行时没有内置功能生成或管理策略文件，这可能会带来一些困难，如管理生产与开发环境的不同策略及动态模块导入。

7021 0

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

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

2.1K22 9

ReactJS和React-Native的主要区别在哪里

设置和绑定 React-Native是一个框架，其中ReactJS是可用于您的网站的JavaScript库。... ); } } 由于您的代码不会在HTML页面中呈现，这也意味着您将无法重用以前使用的ReactJS使用任何类型的HTML，SVG或Canvas的库...要为您的React-Native组件设置样式，您必须在Javascript中创建样式表。...你也可以看看NavigatorExperimental，但在我认为，它还不适于应用于生产环境中。...我建议您将组件的主要逻辑定义在一个名为index.js的文件中，然后您将使用单个文件定义演示组件。

17K3 0

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自身的脚本)，如不引入，所有的脚本将不执行 ? ?

8484 0

webpack（4.8.3）总结

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

7864 0

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.6K2 1

03.HTML头部CSS图像表格列表

标签通常用于链接到样式表: HTML 元素标签定义了HTML文档的样式文件引用地址....script>标签用于加载脚本文件，如： JavaScript。... 定义了HTML文档中的元数据定义了客户端的脚本文件定义了HTML文档的样式文件 HTML 样式- CSS CSS (Cascading Style...使用外部 CSS 文件最好的方式是通过外部引用CSS文件....Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 表格这个例子演示如何在 HTML 文档中创建表格。

19.4K10 1

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

熟悉 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

7442 0

面向 C++ 的现代 CMake 教程（三）

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

6720 0

在找一份相对完整的Webpack项目配置指南么？这里有

号之后的好处是，不会生成新的文件（只是文件内容被更改了），同时hash会附在引用该资源的URL后（如script标签中的引用） publicPath指定所引用资源的目录，如在html中的引用方式，建议设置一个...chunks中的模块公共部分，如果没有公共的就不会提取，所以最好是在entry中就指定common模块初始包含的第三方模块，如jquery，react等 // 文件入口配置 entry: {...HtmlWebpackPlugin将页面模板编译成最终的页面文件，包含JS及CSS资源的引用第一个重要的功能就是生成对资源的引入了，第二个就是帮助我们填入资源的chunkhash值防止浏览器缓存这个在生产环境使用就行了..._extend; 5 6 7 // HtmlWebpackPlugin 运行后调整公共script文件在html中的位置，主要用于jQuery插件的引入 8 function HtmlOrderCommonScriptPlugin.../webpack.myPlugin.js'); // HtmlWebpackPlugin 运行后调整公共script文件在html中的位置，主要用于jQuery插件的引入 new HtmlOrderCommonScriptPlugin

3.5K1 0

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.8K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭