reactjs - 如何从 react-create-app 创建一个包文件

Question

我正在尝试将 react-create-app 构建到一个文件中(包括 JS、CSS、PNG 等...)。

这有可能吗？

我应该尝试使用 rollup 还是可以使用 webpack？

我测试了https://www.npmjs.com/package/html-webpack-inline-source-plugin但看起来已经过时且无法正常工作。

Answer 1

是的，可以使用 CRA (create-react-app) 和 webpack 来做到这一点。我将在下面详细说明我已经开始工作的 3 个选项。

设置 - 安装 react-app-rewired

下面的每个选项都使用 react-app-rewired 来在 create-react-app 中自定义 webpack 配置而无需弹出。第一步，按照 https://github.com/timarney/react-app-rewired#how-to-rewire-your-create-react-app-project 上的安装说明进行操作

如果您已经弹出或想要弹出，您仍然可以使用下面的任何选项，您只需直接在 config/webpack.config.js 中修改插件，而不是通过 react-app-rewired 的配置以编程方式修改-overrides.js。

注意:下面的两个选项有require('html-webpack-plugin')。不要 yarn 添加这个，以确保您获得 create-react-app 安装的版本。

选项 1 - 使用 html-webpack-inline-source-plugin

对于这个，我必须手动指定最新的测试版。当我在没有指定版本的情况下运行 npm install --save html-webpack-inline-source-plugin 时，我得到了版本 0.0.10，但它失败了。

1. 安装 react-app-rewired(参见上面的设置部分)
2. yarn add html-webpack-inline-source-plugin@1.0.0-beta.2
3. 编辑 config-overrides.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins
      .find(plugin => Object.getPrototypeOf(plugin).constructor.name === 'HtmlWebpackPlugin')
      .options.inlineSource = '.(js|css)$'
    config.plugins.push(new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin))
  }
  return config
}

注意:此插件未得到积极维护(请参阅 https://github.com/dustinjackson/html-webpack-inline-source-plugin#readme 顶部的注释)但它对我有用。

选项 2 - 使用 script-ext-webpack-plugin和 style-ext-html-webpack-plugin

1. 安装 react-app-rewired(参见上面的设置部分)
2. yarn 添加 script-ext-html-webpack-plugin style-ext-html-webpack-plugin
3. 编辑 config-overrides.js:

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin')

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.push(new ScriptExtHtmlWebpackPlugin({
      inline: /.+[.]js/
    }))
    config.plugins.push(new StyleExtHtmlWebpackPlugin())
  }
  return config
}

注意:如果您没有任何 .css 文件，此选项将失败(StyleExtHtmlWebpackPluginError: StyleExtHtmlWebpackPlugin: 找不到 ExtractTextWebpackPlugin 生成的 .css 文件)。如果是，就把这两行注释掉或者删掉

//const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin')
{...}
    //config.plugins.push(new StyleExtHtmlWebpackPlugin())

选项 3 - 使用 react-dev-utils/InlineChunkHtmlPlugin

1. 安装 react-app-rewired(参见上面的设置部分)
2. (这里不需要添加 yarn，因为 react-dev-utils 是 create-react-app 的一部分)
3. 编辑 config-overrides.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.push(new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.+[.]js/]))
  }
  return config
}

注意:这个选项只会内联js文件，不会内联css文件。