craco学习: 在 cra5 中配置相关插件

craco 终于开始更新了，传说最近alpha版本会cra5，打算在自己的项目中试一下
更新于: 2023-09-12 07:03:12

安装

yarn add @craco/craco @craco/types

配置文件

  • 以下所有的文件都是可以使用的
  • 你也可以使用自定义名称，不过自己一般不会使用
craco.config.ts
craco.config.js
craco.config.cjs
.cracorc.ts
.cracorc.js
.cracorc

内容如下 craco.config.ts

import path from 'path';

export default {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  }
};

自定义配置文件

自定义配置文件的名称，在 package.json 里使用自定义名称。

  • 方式1: 指定配置文件
  • 方式2: 直接使用 --config 参考来指定。
{
  "cracoConfig": "config/craco-config-with-custom-name.js"
}
{
  "scripts": {
    "start": "craco start --config config/craco-config-with-custom-name.js"
  }
}

利用 craco 配置 @

  • 添加 craco 配置(上面已经添加)
  • 添加编辑器支持
.
├── README.md
├── craco.config.ts
├── docs
├── node_modules
├── package.json
├── public
├── src
├── tsconfig.base.json
├── tsconfig.json
└── yarn.lock

配置 craco.config.ts

import path from 'path';

export default {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  }
};

tsconfig.base.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

tsconfig.json

{
  "extends": "./tsconfig.base.json",
  // ...other config
}

一个 waring

 (node:11772) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:11772) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
warning 截图

与 github 的相关 issues:

参考