Manage the REACT project path alias using CrACO

When creating a React project using the create-React-app scaffolding, we were unable to override some of the webpack configuration that the scaffolding presets. Tutorials on the web often recommend exposing the configuration and modifying it using NPM Run eject. However, the eject operation is irreversible. After the configuration is displayed, the React-Script version of the project cannot be upgraded.

Craco — Create React App Configuration Override

Create React App Configuration Override is an easy-to-understand Configuration layer of create-React App. By adding the craco.config.js file to the root of your project and customizing ESLint, Babel, postCSS, and more, you can get all the benefits of create-React-app and customization without using eject.

The advantage of Craco is that it inherits the configuration of CRA by default, rather than overwriting it (similar to vue.config.js in VUE), which is much more convenient for extending CRA. At present (2021-1-7), the weekly download of this plug-in is more than 70,000 times, which is a relatively healthy plug-in.

Configure projects using CrACO

0. Create a project using create-react-app

   $ yarn create react-app myApp
   Copy the code

1. Use CrACO for the project

   $ yarn add @craco/craco
   Copy the code

2. Create craco.config.js in the project root directory and configure it as follows

   const path = require('path');
   const resolve = dir => path.resolve(__dirname,dir);
   ​
   module.exports={
     webpack:{
       alias:{
         '@src': resolve('src')
       }
     }
   }
   Copy the code

3. Modify the package.json file of the project as follows

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

At this point, the path alias configuration is complete and you can replace the native path usage in your code with something like the following

import React from 'react';
import ReactDOM from 'react-dom';
import Test from '@src/components/test.jsx'
​
ReactDOM.render(
  <React.StrictMode>
    <Test />
  </React.StrictMode>,
  document.getElementById('root')
);
Copy the code

However, in the development process, we will lose the compiler’s own path completion and file prompt, next to complete this part of the function.

Added the automatic completion function of path aliases

Here, I only use VS Code as the IDE, so WebStorm doesn’t know how to configure it.

0. Install the plug-in in VS Code: Path Autocomplete

1. In setting.json, add the following configuration:

   {/ / define custom mapping for automatic path "path - autocomplete. PathMappings" : {" @ SRC ": "${folder} / SRC"}, / / display all files in directory "path - autocomplete. ExcludedItems" : {" * * *. / js ": {" when" : "**/*.ts" }, // ignore js files if i'm inside a ts file "**/*.map": { "when": "**" }, // always ignore *.map files "**/{.git,node_modules}": { "when": "**" } // always ignore .git and node_modules folders }, / / insert file on the import or the require statement add extension "path - autocomplete. ExtensionOnImport" : true},Copy the code

2. Add the file jsconfig.js to package.json as follows:

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "@src/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
Copy the code

Jsconfig. js is an official VS Code solution for alias recognition. If you want to complete path alias auto-completion, the above steps are required.

Why not use Path Intellisense? Because I haven’t found how to solve the problem of showing all files in the directory, so I don’t use it for the time being.

conclusion

0. Craco is a current community solution that extends Craco while retaining the powerful preset features of React-SRCIPT.
1. At present, only the path alias function is used. In the future, we may encounter more similar code splitting requirements, and then we will touch on other craco function modules in detail
2. There’s no end to learning. It’s really fun.