使用craco管理react项目路径别名

当我们使用create-react-app脚手架创建react项目时，我们无法覆盖脚手架预设的一些webpack配置，通常网上的教程都会推荐大家使用npm run eject暴露配置然后进行修改。但eject操作是不可逆操作，弹出配置后无法升级项目的react-script 版本。

craco——Create React App Configuration Override.

github文档中是这么写的：Create React App Configuration Override是create-react-app的一个容易理解的配置层。通过在项目的根目录中添加craco.config.js文件并自定义eslint,babel,postcss以及更多其它配置，可以在不使用eject操作的情况下获得create-react-app和自定义的所有优点。

craco优点是：默认继承CRA的配置，而不是覆盖（类似于vue中的vue.config.js），对于扩展CRA来说方便许多，目前（2021-1-7）该插件周下载量是七万余次，是比较健康的一个插件。

使用craco配置项目

0. 使用create-react-app 创建项目

   $ yarn create react-app myApp
   

1. 为项目使用craco

   $ yarn add @craco/craco
   

2. 在项目根目录下创建craco.config.js并配置如下

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

3. 修改项目的package.json文件如下

   "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"
     },
   

到此，路径别名配置就完成了，在代码中使用类似如下方式即可代替原生的路径使用方法

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')
);

但是这样在开发过程中我们就会丢失掉编译器自带的路径补全和文件提示了，接下来补全这部分功能。

增加路径别名的自动补全功能

这里，我只使用了VS Code作为IDE，所以webstorm并不知道怎么配置。

0. 在VS Code中安装插件：Path Autocomplete

1. 在setting.json中，添加配置如下：

   {   //为自动完成路径定义自定义映射
       "path-autocomplete.pathMappings": {
           "@src": "${folder}/src"
       },
       //展示目录下所有文件
       "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
       },
       //在import或require语句上插入文件时添加扩展名
       "path-autocomplete.extensionOnImport": true,
   }
   

2. 在package.json 目录下增加文件jsconfig.js，内容如下：

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

jsconfig.js是VS Code官方提出的一个解决别名识别的方法，如果要完成路径别名的自动补全功能，上面的步骤一步也不能少。

为什么不使用Path Intellisense？因为暂时还没有发现如何解决展示目录下所有文件，所以暂时不使用。

总结

0. craco 是一个目前来看很香的社区解决方案，既扩展了craco又保留了react-srcipt原有强大的预设功能。
1. 目前只用到了路径别名的功能，在以后可能会遇到更多的类似代码分割需求，到时候再详细的接触craco的其它功能模块
2. 学无止境，折腾是真的有趣。