This is the fifth day of my participation in Gwen Challenge

eject

After creating the project using CRA, the project provides this command in package.json:

{
  "scripts": {
    "eject": "react-scripts eject"}}Copy the code

This command decompiles all the configuration encapsulated in CRA into the current project so that the user can take full control of the webpack file and modify it as he or she wishes:

#After eject, the config folder appears under the project root, which contains the WebPack configurationThe config ├ ─ ─ env. Js ├ ─ ─ jest │ ├ ─ ─ cssTransform. Js │ └ ─ ─ fileTransform. Js ├ ─ ─ paths. Js ├ ─ ─ polyfills, js ├ ─ ─ Webpack. Config. Dev. Js / / development environment configuration ├ ─ ─ webpack. Config. Prod. Js / / production environment configuration └ ─ ─ webpackDevServer. Config. JsCopy the code

However, if you use eject, you no longer get the benefits of CRA upgrades because React-Scripts already exist in your project as a file, not as a package, so you can’t update it.

replacereact-scripts 包

React-scripts is a core CRA package that contains the default configuration of scripts and tools. CRA provides another way to create CRA projects, using the custom scripts package:

#The default mode
$ create-react-app foo
#Customize the scripts package mode
$Create-react-app foo --scripts-version User-defined package

Copy the code

Custom packages can take one of the following forms:

  • react-scriptsThe package version number, for example0.8.2This form can be used to install lower versionsreact-scriptsThe package.
  • One has been released tonpmThe name of the bag on the warehouse, likeyour-scriptsWhich contains the modifiedwebpackConfiguration.
  • atgzFormat compressed files, such as/your/local/scripts.tgz, usually unpublished tonpmCustomization of the warehousescriptsBag, yesnpm packCommand generation.

This is a more flexible way to modify the WebPack configuration than the previous Eject, and you can upgrade the project features by upgrading the Scrips package, as with CRA. The structure of the custom scripts package can be similar to that of the React-scripts package by modifying the corresponding WebPack configuration file and installing the required WebPack Loader or plugin package.

customize-cra

address

Extend the configuration according to the documentation:

const { override } = require("customize-cra");
module.exports = {};
Copy the code

Modify the package. The json:

"scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test --env=jsdom"."eject": "react-scripts eject"
  }

Copy the code

CRACO

address

Without eject, you can customize the configuration through Craco.config

  1. Installation:
$ yarn add @craco/craco

# OR

$ npm install @craco/craco --save
Copy the code
  1. Create it in the root directorycraco.config.js
  2. Modify thepackage.jsonThe inside of thescript:
/* package.json */

"scripts": {-"start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}
Copy the code

To compare

  • ejectIt is irreversible and cannot be upgraded with the official
  • react-scriptYou need to release customized maintenance packages, which are suitable for long-term maintenance projects
  • custom-craMay 2020 has not updated, configuration is more complex, manyplugin loaderUnable to configure
  • cracoSomeone who continues to maintain sensory functions is also better thancustom-craStrong,antdIt is recommended to use