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

【问题标题】：Converting React component to a single js file to integrate it with a blank html将 React 组件转换为单个 js 文件以将其与空白 html 集成
【发布时间】：2018-12-30 13:36:59
【问题描述】：

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

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

【问题讨论】：

这是一个非常广泛的问题，很难回答。您可以轻松地使用 Webpack 和 Babel 完成您所要求的事情（我相信 create-react 应用程序项目通过使用 JS 文件和 index.html 填充您的“dist”文件夹可以很好地做到这一点）。如果管理配置太多，您可以查看Parcel.js，通过运行一个没有配置的简单命令，它会为您提供您想要的（带有单个 js 文件的单个 html 文件）。
有transformers在js代码中转换JSX/TSX。有一些像 webpack/grunt/gulp 这样的插件可以获取你的 js 文件并从它们中合并/创建一个包。我的建议，看看如何改用它们
我在 react-scripts 构建后得到了一些东西。但在那之后图像没有显示。我需要调整任何设置来提供图片吗？
@Jonathon 我认为问题可能是由于使用了相对路径。我已经更新了我的答案，如果这没有帮助，请告诉我。在浏览器中检查您的网络控制台，看看它在哪里搜索图像/样式，这将帮助您找到要设置的相对路径。
Setup React.js and Babel的可能重复

标签： javascript reactjs webpack ecmascript-6 babeljs

【解决方案1】：

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

Babel Preset for React

完成步骤：

运行npm install babel babel-cli babel-preset-react
在项目根目录定义.babelrc，内容如下

{ "presets": ["react"], }
运行babel {jsxFile}.jsx --out {jsFile}.js

【讨论】：

【解决方案2】：

对 Js 世界很陌生，听说过 babel 和 webpack 不知道怎么用

上面的陈述告诉我，最好避免设置 npm 构建管道。
所以假设你有jsx 中的组件并且你想使用javascript 版本，你需要“转换”它。如果是改动不大的组件，可以看一下网上的babel.io repl（documentation官方网站也推荐这个）。

但是，如果您的组件经常更改，这种方法可能会很乏味。我强烈推荐create-react-app 进行开发。它是一个固执己见的工具包，它隐藏了 webpack 和 babel 配置，但同时，他们的意见有据可查，适用于许多一般用例。

编辑从您的 cmets 看来，您似乎已经在使用 react-scripts，那么我看到的最可能的问题是您可能忘记在 package.json 中指定 homepage 属性（请参阅相关的 documentation）默认情况下，CRA 假定您的静态资产托管在服务器根目录，我假设您没有在 ROOT 上下文中部署 WAR，因此您需要提供静态位置。

我有一个类似的设置，我需要将使用 react 构建的网站打包到一个 war 文件中，我有以下设置：

在 package.json 中

"homepage": "/<webapp_context>/build"

然后使用 gradle，我将 build 文件夹整个复制到 WAR 文件中（与 WEB-INF 相同级别）。

这指示react-scripts 将相对路径放入它发布的所有静态资产（例如 CSS、js 和图像）中，然后导入工作。

【讨论】：