如何在浏览器中使用 JSX 导入 javascript 模块？

Question

作为 React 项目的一部分，我有一个具有以下结构的目录。

• index.html
• main.js
• mod.js

在 HTML 中，我使用脚本标签来获取 React 和 Babel，因为我的 JS 文件包含 JSX。 我还使用脚本标记来包含我的 main.js 文件，如下所示： <script type="text/babel" src="main.js"></script>

我发现我必须使用 type=text/babel 才能正确处理 JSX。

mod.js 是我要导入的模块。在 main.js 中 我用：

import {mod_func} from './mod'

在 mod.js 中我使用 export mod_func function()...

但是，当我通过 Web 服务器（Chrome 的 Web 服务器）在浏览器中打开 HTML 时，我得到： Uncaught ReferenceError: require is not defined

在阅读了一些关于这个错误的信息后，我认为我需要让 HTML 将我的 main.js 视为可以导入其他模块的模块，通过使用 type="module" 标签，但我还需要 type=text/babel标记，所以我不知道该怎么办。

当我只能将脚本类型设置为其中一种类型时，如何导入包含 JSX 的 javascript 模块？

Answer 1

JSX 代表JavaScript 语法扩展，常用于ReactJS Apps。如果我更深入地研究 JSX 文件，它允许您将 html-xml-styled codes 存储到 JavaScript 变量中，并且您可以使用函数返回 HTML-XML-styled code。此外，您需要 babel 以 transpiler 的形式执行此操作，因为您的浏览器不知道您的代码以 JSX 文件的形式出现。

您遇到的错误是关于在 JavaScript World 中使用节点模块的两种方法。

1. ES6 Module [ you use require ] 
2. CommonJS  [ you use import ] 

提示：如果您热衷于使用JSX 作为应用程序的文件格式，请使用

npx create-react-app [your project's name]

或

npx create-react-app --template [ template's name ]

或

使用 Webpack 作为 bundler 和 babel 文件来做同样的事情[高级模式]强>

提示：您可以在 npm packages

中找到很多 React 模板

待办事项： 两种导出方法 [默认导出 / 名称导出]

名称导出： export const [ name ] = . . . .

• 提示：你需要a curly brace来导入它

默认导出： export default . . .

• 提示：您根本不需要 a curly brace 来导入它