javascript - 将 React 组件转换为单个 js 文件以将其与空白 html 集成

Question

React 组件是使用 JSX 开发的。如何将其转换为浏览器可理解的 JS 代码并缩小为 1 个 js 文件，以便可以将其作为单个脚本标签包含在 html 中？我对 Js 世界非常陌生，听说过 babel 和 webpack。不知道如何使用它和隐藏它是一样的。

我在react-scripts build后生成了一些东西。但是如果我将它们作为静态部署在weblogic中，则图像不会提供服务

Answer 1

要将 jsx 转换为浏览器可运行的 js 代码，您必须使用 babel。您可以使用 babel-preset-react 来实现此目的(通过配置 .babelrc)。

Babel Preset for React

完成步骤:

1. 运行npm install babel babel-cli babel-preset-react

2. 在项目根级别定义.babelrc，内容如下

   {
“预设”:[“ react ”]，
}

3. 运行babel {jsxFile}.jsx --out {jsFile}.js