react app rewired - 左子网

在将问题提交此回购之前 – 确保该回购中的代码是一个问题，而不是如何使用WebPack问题配置某些内容（在堆栈溢出或频谱上发布某些内容）。这是您“拥有”它的配置。

2.0版删除了Rewire Helper功能
中文版本说明

调整Create-React-App WebPack配置（s），而无需使用“弹出”，也不会创建反应标记的叉子。

创建反应应用的所有好处，而没有“无配置”的限制。无论您需要，您都可以添加插件，加载程序。

重新连接您的应用☠

从创建React App 2.0开始，此仓库在这一点上主要由社区维护。

配x请注意：

通过这样做，您将破坏CRA提供的“保证”。也就是说，您现在“拥有”配置。不会提供支持。谨慎行事。

“东西可以破裂” – 丹·阿布拉莫夫https://*tw*itter.co*m/dan_abramov/status/1045809734069170176

注意：我亲自使用next.js或razzle，两者都支持开箱即用的自定义WebPack。

替代方案

您可以尝试使用一组CRA 2.0兼容的Rewirers或任何旨在支持2.0的替代项目和叉子来尝试自定义CRA：

reccripts，是扩展CRA配置的替代框架（支持2.0+）。
旨在支持CRA 2.0的该项目的叉子的反式订阅
克拉科

如何重新连接您的创建反应项目

使用Create-React-App创建您的应用程序，然后重新布线。

1）安装反应应用程序

对于使用WebPack 4的Create-React-App 2.x：

npm install react-app-rewired --save-dev

对于使用WebPack 3的Create-React-App 1.x或React-Scripts-TS 3：

npm install react-app-rewired@1.6.2 --save-dev

2）在根目录中创建一个`config-overrides.js`文件

 /* config-overrides.js */

module . exports = function override ( config , env ) {
  //do stuff with the webpack config...
  return config ;
}

 +-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

3）“翻转” `npm`脚本中`react-scripts`的现有调用以进行启动，构建和测试

  /* package.json */

  \"scripts\": {
-   \"start\": \"react-scripts start\",
+   \"start\": \"react-app-rewired start\",
-   \"build\": \"react-scripts build\",
+   \"build\": \"react-app-rewired build\",
-   \"test\": \"react-scripts test\",
+   \"test\": \"react-app-rewired test\",
    \"eject\": \"react-scripts eject\"
}

注意：请勿翻转eject脚本的呼叫。该项目只能运行一次，之后您可以完全控制WebPack配置，从而不再需要与react-app-rewired 。没有配置选项可以重新用于eject脚本。

4）启动开发服务器

npm start

5）构建您的应用程序

npm run build

扩展配置选项

您可以为config-overrides.js设置自定义路径。如果您（例如）想使用node_modules中存在的第三方party config-overrides.js ，则可以将以下内容添加到您的package.json 。

 \"config-overrides-path\" : \" node_modules/some-preconfigured-rewire \"

默认情况下，在自定义WebPack配置以在开发或生产模式下编译您的React应用程序时， config-overrides.js文件导出要使用的单个函数。取而代之的是，可以从此文件中导出一个最多包含三个字段的对象，每个字段都是一个函数。此替代表单允许您自定义用于开玩笑（测试）和WebPack Dev Server本身的配置。

此示例实现用于使用每个对象都需要功能来证明。在示例中，功能：

根据.env变量有条件运行一些测试
设置用于开发服务器的HTTPS证书，并在.env文件变量中指定文件名。

 module . exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack : function ( config , env ) {
    // ...add your webpack config
    return config ;
  } ,
  // The Jest config to use when running your jest tests - note that the normal rewires do not
  // work here.
  jest : function ( config ) {
    // ...add your jest config customisation...
    // Example: enable/disable some tests based on environment variables in the .env file.
    if ( ! config . testPathIgnorePatterns ) {
      config . testPathIgnorePatterns = [ ] ;
    }
    if ( ! process . env . RUN_COMPONENT_TESTS ) {
      config . testPathIgnorePatterns . push ( \'<rootDir>/src/components/**/*.test.js\' ) ;
    }
    if ( ! process . env . RUN_REDUCER_TESTS ) {
      config . testPathIgnorePatterns . push ( \'<rootDir>/src/reducers/**/*.test.js\' ) ;
    }
    return config ;
  } ,
  // The function to use to create a webpack dev server configuration when running the development
  // server with \'npm run start\' or \'yarn start\'.
  // Example: set the dev server to use a specific certificate in https.
  devServer : function ( configFunction ) {
    // Return the replacement function for create-react-app to use to generate the Webpack
    // Development Server config. \"configFunction\" is the function that would normally have
    // been used to generate the Webpack Development server config - you can use it to create
    // a starting configuration to then modify instead of having to create a config from scratch.
    return function ( proxy , allowedHost ) {
      // Create the default config by calling configFunction with the proxy/allowedHost parameters
      const config = configFunction ( proxy , allowedHost ) ;

      // Change the https certificate options to match your certificate, using the .env file to
      // set the file paths & passphrase.
      const fs = require ( \'fs\' ) ;
      config . https = {
        key : fs . readFileSync ( process . env . REACT_HTTPS_KEY , \'utf8\' ) ,
        cert : fs . readFileSync ( process . env . REACT_HTTPS_CERT , \'utf8\' ) ,
        ca : fs . readFileSync ( process . env . REACT_HTTPS_CA , \'utf8\' ) ,
        passphrase : process . env . REACT_HTTPS_PASS
      } ;

      // Return your customised Webpack Development Server config.
      return config ;
    } ;
  } ,
  // The paths config to use when compiling your react app for development or production.
  paths : function ( paths , env ) {
    // ...add your paths config
    return paths ;
  } ,
}

1）Webpack配置 – 开发与生产

webpack字段用于提供等同于从config-overrides.js导出的单功能。这是使用所有通常的刷线的地方。它无法在测试模式下配置编译，因为测试模式根本无法通过WebPack运行（它以Jest运行）。它也无法用于自定义用于在开发模式下使用页面的WebPack Dev服务器，因为Create-React-App生成了单独的WebPack配置，供使用不同的函数和默认值与Dev Server一起使用。

2）开玩笑的配置 – 测试

WebPack不用于在测试模式下编译您的应用程序 – 而是使用JEST。这意味着您的WebPack配置自定义功能中指定的任何重新线都不会在测试模式下应用于您的项目。

react-app-rewed自动允许您在package.json的jest部分中自定义开玩笑的配置。JSON文件，包括允许您设置创建反应应用程序通常会阻止您设置的配置字段。它还可以在进行测试之前自动设置开玩笑以用babel编译该项目。开玩笑的配置选项在Jest网站上分别记录下来。注意：配置数组和对象是合并的，而不是覆盖的。有关详细信息，请参见＃240和＃241

如果要将插件和/或预设添加到嘲笑将使用的babel配置中，则需要在package.json中的babel部分或.babelrc文件中定义这些插件/预设。 React App-Rewed会改变开玩笑的配置，以使用这些定义文件来指定Babel选项，当时JEST正在编译您的React应用程序。在Babel网站上分别记录在包裹或.babelrc文件的“ babel”部分中使用的格式。

config-overrides.js中的模块中的jest字段用于指定一个函数，该函数可以被调用，以在package.json文件的嘲笑部分中以无法做出的方式自定义开玩笑的测试配置。例如，它将允许您根据环境变量更改一些配置选项。此功能将传递默认的创建 – 反应式嘲笑式配置作为参数，并需要返回要使用的修改后的嘲笑配置。很多时候，您都可以通过使用package.json文件的嘲笑部分和.babelrc文件（或包装中的babel process.json中的babel exction）来进行所需的配置更改，而不需要在config-overrides.js中提供此嘲笑函数。

3）WebPack Dev服务器

在开发模式下运行时，Create-React-App不会为开发服务器使用常规的WebPack配置（为应用程序页面提供的服务器）。这意味着您无法使用config-overrides.js服务器的普通webpack部分来更改开发服务器设置，因为这些更改不应用。

而不是这样，创建反应应用期望能够在需要时调用一个函数来生成WebPack Dev服务器。此功能具有用于代理和允许host设置的参数，该功能将在WebPack Dev Server中使用（Create-react-app从您的package.json文件中检索这些参数的值）。

react-app-rewired提供了通过在config-overrides.js中使用模块中的devServer字段来覆盖此功能的能力。它为DevServer函数提供了一个单个参数，其中包含通常用于生成Dev Server配置的默认Create-React-App函数（它无法提供配置的生成版本，因为React-Scripts正在直接调用Generation函数）。 React-App-Rewed需要接收作为返回值的返回值，用于create-react-app的替换函数，然后使用以生成开发服务器配置（即返回值应该是一个新功能，将两个参数用于代理和允许霍斯特，并且本身返回WebPack开发服务器配置）。原始的React-Scripts函数将传递到config-overrides.js devserver函数中，以便您可以根据Create-react-app所使用的默认值来轻松地调用此函数以生成您的初始DevServer配置。

4）路径配置 – 开发与生产

paths字段用于为传递到WebPack和Jest的create-react-app路径提供覆盖。

5）为第三方工具提供重新有线的WebPack配置

一些第三方工具（例如react-cosmos依赖于您的WebPack配置。您可以创建webpack.config.js文件，并使用以下片段导出rewired配置：

 const { paths } = require ( \'react-app-rewired\' ) ;
// require normalized overrides
const overrides = require ( \'react-app-rewired/config-overrides\' ) ;
const config = require ( paths . scriptVersion + \'/config/webpack.config.dev\' ) ;

module . exports = overrides . webpack ( config , process . env . NODE_ENV ) ;

然后只需在工具配置中指向此文件即可。

其他问题和选择

1）入口点：\’src/index.js\’

在此时间点，由于create-react-app包含该文件的方式，因此很难从默认的src/index.js文件更改输入点。普通的重新布线过程被几个创建反应应用脚本绕过。

这里有三个工作可用：

只需从src/index.js文件内部需要/导入所需的文件，例如：

 require ( \'./index.tsx\' ) ;

使用React-Scripts软件包的自定义版本，该软件包会更改脚本本身内部的入口点（例如，打字稿项目的React-Scripts-TS-有关如何使用React-App-App-rewired的自定义脚本版本请参见下文）。
覆盖react-dev-utils/checkRequiredFiles函数始终返回true（引起创建反应应用不再试图强制执行条目文件必须存在）。

2）自定义脚本版本

通过在命令行选项中指定脚本软件包的名称--scripts-version或设置REACT_SCRIPTS_VERSION=<...>通过环境，可以使用react-scripts软件包的自定义版本与react-App-rewired。

使用脚本版本选项的工作示例是：

{
  \"scripts\" : {
    \"start\" : \" react-app-rewired start --scripts-version react-scripts-ts \" ,
    \"build\" : \" react-app-rewired build --scripts-version react-scripts-ts \" ,
    \"test\" : \" react-app-rewired test --scripts-version react-scripts-ts \" ,
    \"eject\" : \" react-scripts eject \"
  }
}

React-App-rewired 2.x需要一个自定义的反应订阅包来提供以下文件：

config/env.js
config/webpack.config.js
config/webpackdevserver.config.js
脚本/build.js
脚本/start.js
脚本/test.js
脚本/utils/createJestConfig.js

React-App-rewired 1.X需要一个自定义的反应订阅包来提供以下文件：

config/env.js
config/webpack.config.dev.js
config/webpack.config.prod.js
config/webpackdevserver.config.js
脚本/build.js
脚本/start.js
脚本/test.js
脚本/utils/createJestConfig.js

3）将Config-Overrides指定为目录

React-App-rewired在没有“ .js”扩展名的情况下导入您的config-overrides.js文件。这意味着您可以选择在项目的根部创建一个名为config-overrides的目录，并从该目录内的默认index.js文件中导出覆盖率。

如果您有几个自定义替代目录，则可以将每个覆盖物放入单独的文件中。一个示例模板，可以在Github的Guria/Rewired-Ts-Boilerplate中找到。

4）从命令行指定config-oferrides位置

如果您需要更改config-overrides.js的位置，则可以将命令行选项（config-overrides）传递给react App-AppRewed脚本。

版本1.x社区维护重新线（检查插件存储库以获取2.0支持）

宝贝插件

@osdevisnot的React-App-Rewire-Rewire-emotion
@osdevisnot的React-App-Rewire-Lodash
@MXSTBR的React-App-App-Rewire-Rewire-Components
由@RawrMonstar抛光的反应应用式涂层
@viktorivarsson的React-App-wrewire-idx
@carlrosell的React-App-App-Rewire-glamolof-displayname
@Brianveltman的React-App-urewire-Import
@detrohutt的React-App-App-rewire-inline-import-graphql-ast
@clemencov的React-App-grewire-React-Intl
@AndReyco的React-App-Rewire-Lingui
@stk-dmitry的React-App-urewire-date-fns
@fupengl的React-App-App-Rewired-Esbuild

Webpack插件

@jtheis85的react-app-app-rewire-appcache-plugin
@RaoDurgesh的React-App-urew-build-dev
@jtheis85的react-app-wrewire-define-plugin
@RickyCook的React-App-App-Frewire-Favicons-Plugin
@jtheis85的React-App-app-grewire-ipagemin-Plugin
@ctrlplusb撰写的React-App-App-Rewire-Modernizr
@jtheis85的React-App-App-Rewire-Preload-Plugin
@jtheis85的React-App-App-provide-Plugin
@marcopeg的React-App-App-Rewire-Rewire-inline-source
@byzyk的React-App-app-webpack-bundle-analyzer
@sigged的React-App-wrew-unplug
@Arvan的React-App-App-Rewire-Compression-Plugin
@derek的React-App-grewire-multiple-entry

装载机

React-App-Rewire-PostCSS
@jtheis85的React-App-App-Rewire-Nearley
@stevefan1999的React-App-App-Rewire-Coffeescript
@jtheis85的React-App-urewire-typscript
@strothj的React-App-App-typescript-babel-Preset
@lnhrdt的React-App-App-Rewire-CSS模型
@MoxyStudio的React-App-App-Rewire-css-modules-extensionless
@Andriijas的React-App-App-Rewire-Rewire-Modules
@marcopeg的React-App-App-Rewire-Stylus模型
@lnhrdt的React-App-App-Rewire-SVG-REACT-REACT-loader
@maxvipon的React-App-App-Rewire-bem-i18n-loader
@dashed react-app-urewire-babel-loader
@gitim的React-App-urewire-Svgr
@HSZ的React-App-grewire-yaml
@aze3ma的React-App-App-Rewire-SCSS
@isanchez的React-App-App-rewire-SCSS-loaders
@MoxyStudio的React-App-Rewire-external-Svg-loader
@rainx的react-app-grewire-typings-for-css模块

其他

@osdevisnot的反应应用 – 螺旋形创造 – 反应
@osdevisnot的React App-App-Rewire-React-library
@Andriijas的React-App-Rewire-Rewire-Rewor-splitting
与Inferno的反应应用
与反应式指导者进行了反应应用
@cdharris与React-Hot-Loader的React应用程序
@oklas的React-App-Alias
@Aze3MA的React-App-Rewire-Reliases
@harrysolovay的React-App-App-Rewire-blockstack
@harrysolovay的理想螺纹
@ViewStools的React-App-App-yarn-workspaces
@fupengl的React App-App-rewired-single-spa

发展

开发此项目时，请确保您安装了纱线。

快速开始

要运行测试应用程序，请导航到目录并运行：

yarn setup
yarn start

（完成后，运行yarn teardown以清理）

命令

这是所有可用命令的列表，可以帮助您开发

yarn setup – 安装依赖关系并链接test/react-app
yarn start – 启动React应用程序
yarn build – 构建React应用程序
yarn test – 测试React应用程序
yarn teardown – UNLINK test/react-app并消除依赖关系

为什么这个项目存在

请参阅：创建React应用程序 – 但我不想弹出。

重新连接您的应用☠

替代方案

如何重新连接您的创建反应项目

1）安装反应应用程序

对于使用WebPack 4的Create-React-App 2.x：

对于使用WebPack 3的Create-React-App 1.x或React-Scripts-TS 3：

2）在根目录中创建一个config-overrides.js文件

3）“翻转” npm脚本中react-scripts的现有调用以进行启动，构建和测试

4）启动开发服务器

5）构建您的应用程序

扩展配置选项

1）Webpack配置 – 开发与生产

2）开玩笑的配置 – 测试

3）WebPack Dev服务器

4）路径配置 – 开发与生产

5）为第三方工具提供重新有线的WebPack配置

其他问题和选择

1）入口点：\’src/index.js\’

2）自定义脚本版本

React-App-rewired 2.x需要一个自定义的反应订阅包来提供以下文件：

React-App-rewired 1.X需要一个自定义的反应订阅包来提供以下文件：

3）将Config-Overrides指定为目录

4）从命令行指定config-oferrides位置

版本1.x社区维护重新线（检查插件存储库以获取2.0支持）

宝贝插件

Webpack插件

装载机

其他

发展

快速开始

命令

为什么这个项目存在

相关文章

微信

左子网

QQ交流群

2）在根目录中创建一个`config-overrides.js`文件

3）“翻转” `npm`脚本中`react-scripts`的现有调用以进行启动，构建和测试