时间戳

首页 > 解决方案 > 将 React 组件转换为单个 js 文件以将其与空白 html 集成

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

问题描述

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

我在 react-scripts build.but 之后生成了一些东西

标签： javascriptreactjswebpackecmascript-6babeljs

解决方案

要将 jsx 转换为浏览器可运行的 js 代码，您必须使用 babel。你可以使用babel-preset-react这个（通过配置 .babelrc）。

React 的 Babel 预设

完成步骤：

  1. 跑npm install babel babel-cli babel-preset-react

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

    { "presets": ["react"], }

  3. 跑babel {jsxFile}.jsx --out {jsFile}.js

推荐阅读