如何从 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 的 config-overrides 以编程方式修改。 js。

注意：以下两个选项都有require('html-webpack-plugin'). 不要纱线添加这个，以确保您通过 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 add 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
}

注意：StyleExtHtmlWebpackPluginError: StyleExtHtmlWebpackPlugin: could not find ExtractTextWebpackPlugin's generated .css file如果您没有任何 .css 文件，此选项将失败 ( )。如果是这样，只需注释掉或删除这两行

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

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

1. 安装 react-app-rewired（参见上面的设置部分）
2. （这里不需要添加纱线，因为 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 文件。