将 React 应用程序作为单个 JS 文件发送答案

【问题标题】：Shipping a React application as a singular JS file将 React 应用程序作为单个 JS 文件发送
【发布时间】：2021-06-10 14:21:18
【问题描述】：

我有一个使用 create-react-app 创建的应用程序，它需要作为单个 .js 文件提供，并附带其组件和 CSS 样式表。如何做呢？如果可能，不要弹出。标准的 npm run build 命令只提供分成块的源代码。

尝试使用 react-rewire-app 解决此问题，但构建未能完成。我的 config-override.js 如下：

const path = require('path');
module.exports = function override(config, env) {
    config.entry = {
          'my-app': './src/index.js'
    }
    config.module.output =  {
        path: path.resolve(__dirname, '../target/classes/static/'),
        filename: '[name].js',
        publicPath: '/'
    }
    return config
}
``

【问题讨论】：

标签： reactjs build create-react-app

【解决方案1】：

您可能希望制作小部件或库，而不是应用程序，因此 CRA 是错误的工具。 CRA 是一种应用程序工具，您绝对不希望像您要求的那样将所有内容捆绑到一个文件中，因为那样会非常糟糕的用户体验。

对于库/小部件捆绑器，我会看一下 Microbundle 之类的东西：https://github.com/developit/microbundle。应该是很少的配置。

话虽如此，您不能在 JS 中包含 CSS 样式表。你甚至不能将它们导入 JS。您需要将它们与您的 JS 一起发布，并让您的用户处理通过 HTML 或您拥有的东西导入它。

【讨论】：