在浏览器中打开找不到应用程序 在浏览器中js运行代码教程

论文详细阐述了在不使用Webpack、Rollup等前缀部署工具的情况下，如何在浏览器中直接运行React应用和JSX代码。核心在于利用CDN引入React和ReactDOM的UMD版本，并通过Babel Standalone在客户端进行JSX代码的实时转译。教程将指导您正确配置HTML和JavaScript文件，避免常见的模块导入错误，实现快速开发与原型验证。核心概念：UMD、Babel Standalone与浏览器环境

在现代前端开发中，我们通常使用import语句来导入模块，这属于es模块规范。然而，浏览器在没有经过构建工具（如webpack、vite）处理的情况下，无法直接解析import React from "react"；类似“裸模块说明符”（裸模块）当你在html中直接通过加载一个包含导入语句的javascript文件时，浏览器会因为无法解析这些模块而报错。

为了在不使用构建工具的情况下在浏览器中直接运行React应用，我们需要依赖以下两个关键点：UMD（通用模块） Definition) 版本的库：React和ReactDOM提供了UMD格式的构建版本，这些版本可以通过lt；scriptgt；标签直接加载到浏览器中。它们将React和ReactDOM对象公开为全局变量（例如window.React和window.ReactDOM），这样你就可以在你的脚本中直接访问它们，而无需使用导入语句。lt；/scriptgt；Babel Standalone：React组件通常使用JSX语法编写，是一种JavaScript的语法扩展。浏览器本身无法直接理解JSX。Babel Standalone是一个在浏览器端运行的Babel版本，它能够在运行时将JSX代码实时转译为标准的JavaScript，从而让浏览器能够执行这些代码。

因此，当你在HTML中通过CDN引入React、ReactDOM的UMD版本以及Babel独立后，你的JavaScript文件就不需要使用import语句，而是直接通过全局变量来访问React和ReactDOM。同时，为了让Babel独立能够处理你的JSX代码，包含JSX的脚本必须使用type="text/babel"属性来加载。正确配置HTML文件

为了让器浏览能够正确和运行React应用，你的index.html文件按照需要特定的顺序引入必要的CDN脚本，并正确地加载你的应用脚本。

以下是一个标准的index.html配置示例：lt；!DOCTYPE htmlgt；lt；html lang=quot；enquot；gt；lt；headgt； lt；titlegt；Reactapplt；/titlegt； lt；meta charset=quot；UTF-8quot； /gt； lt；meta name=quot；viewportquot； content=quot；width=device-width，initial-scale=1.0quot； /gt； lt；!-- 引入React UMD版本 --gt； lt；脚本跨域 src=quot；https：//unpkg.com/react@18/umd/react.development.jsquot；gt；lt；/scriptgt； lt；!-- 引入ReactDOM UMD版本 --gt； lt；脚本跨域src=quot；https：//unpkg.com/react-dom@18/umd/react-dom.development.jsquot；gt；lt；/scriptgt； lt；!-- 引入Babel Standalone，用于浏览器端JSX转译 --gt； lt；script src=quot；https：//unpkg.com/@babel/standalone/babel.min.jsquot；gt；lt；/scriptgt；lt；/headgt；lt；bodygt； lt；div id=quot；rootquot；gt；lt；/divgt； lt；!-- 引用您的应用脚本，并指定 type=quot；text/babelquot； --gt； lt；脚本类型=quot；text/babelquot； src=quot；index.jsquot；gt；lt；/scriptgt；lt；/bodygt；lt；/htmlgt；登录后复制

关键点解析：CDN 顺序：react.development.js 必须在 React-dom.development.js 之前加载，因为 React-dom 依赖于 React。babel.min.js 必须在你的应用脚本 (index.js) 之前加载，因为它需要先准备好转译环境。crossorigin 属性：用于添加从 CDN 加载的脚本，crossorigin属性有助于处理跨域资源共享（CORS），特别是在错误报告和调试方面。type="text/babel"：这是至关重要的一步。它告诉浏览器这个lt；scriptgt；标签中的内容（或通过src加载的文件）需要由Babel独立进行处理。如果缺少这个属性，浏览器会尝试将其作为普通JavaScript执行，并因无法识别JSX语法而报错。lt；/scriptgt；编写的React组件脚本

在你的JavaScript文件（例如index.js）中，你不再需要使用导入语句来导入React和ReactDOM。

由于它们已经通过UMD版本作为全局变量公开，你可以直接访问React和ReactDOM。

以下是与上述HTML配置相匹配的index.js内容示例：//注意：这里不再需要 import React 和 import ReactDOMconst Page = () =gt； ( lt；divgt； lt；h1 className=quot；headerquot；gt；这是一个 JSX 元素 lt；/h1gt； lt；pgt；这是一个段落。lt；/pgt； lt；/divgt；)；const container = document.getElementById('root')；//直接使用全局的ReactDOM对象进行渲染ReactDOM.render(lt；Page /gt；，容器）；登录后复制

在这个例子中，Page是一个简单的组件函数，它返回一个包含JSX的React元素。ReactDOM.render()方法用来将该React元素渲染到HTML中ID为root的DOM元素内部。注意事项与最佳实践

这种方法可以让你在不使用构建工具的情况下启动快速React项目，但它也有一些重要的注意事项和结构：性能以及：Babel单机在客户端实时转译代码会带来一定的性能开销。对于大型或复杂的应用，这可能会导致页面加载变慢，影响用户体验。开发效率：虽然省去了配置构建工具的步骤，但这种方式不支持现代前端开发中的一些高级功能，例如热模块替换（HMR）、代码分割（Code）生产环境不推荐：由于性能和优化方面的考虑，这种直接在浏览器中进行运行时转译的方法不适合生产环境。生产环境的应用通常需要通过Webpack、Vite、Rollup等构建工具进行资源、压缩、优化和Tree适用场景：方法最适合以下场景：学习和原型开发：快速验证React概念或构建小型原型，消耗复杂的构建设置。简单的演示页面：制作一个简单的、不涉及复杂逻辑的React组件演示。CDN环境：在一些特定的情况下，可能需要直接从CDN加载所有资源。

总结

理解在浏览器中直接运行React和JSX的原理，对于初学者掌握React的基础概念非常有帮助。它揭示了React应用如何在没有构建工具的辅助下工作，以及Babel在其中扮演着关键角色。然而，对于任何后续的React项目，尤其是需要部署到生产环境的应用，强烈建议采用现代前端构建工具（如Vite或Create） React App生成的项目）来管理依赖、优化代码和提升开发体验。

以上就是在浏览器中直接运行React和JSX：消耗构建工具的配置指南的详细内容，更多请关注乐哥常识网其他相关文章！