react18 + TS的webpack增量配置——使用craco/craco

Posted 2022-12-11 勇敢*牛牛

react18 + TS的webpack增量配置——使用@craco/craco

安装@craco/craco

在项目根目录下面创建一个craco.config.ts文件

在tsconfig.json文件中添加tsc编译目录或文件

修改package.json文件中的自定义命令

• yarn add @craco/craco
• yarn add -D @types/node
• 修改配置，araco.config,ts和tsc.confi配置。
• 这次修改之后模块化就变成了ESCM，es6模块化；
• 注意导入方式。
• mock数据，安装一下
• yarn add -D express @types/express // 指定express的数据类型

// 此文件的功能是增量配置webpack的，修改了此文件，一定要重启项目
// https://github.com/dilanx/craco/blob/master/packages/craco/README.md
// const path = require('path')
import  resolve  from 'path'
import mockFn from './mock'

module.exports = 
  // yarn add -D babel-plugin-import 包先安装
  babel: 
    // antd包在craco增量配置中的按需加载配置
    // plugins: [['import',  libraryName: 'antd', libraryDirectory: 'es', style: 'css' ]]
  ,
  // 添加路径别名
  webpack: 
    alias: 
      // 在组件中就可以用@来表示，当前项目到src目录
      '@': resolve('./src')
    
  ,
  devServer: 
    // 浏览器自动打开关闭
    open: false,
    port: 3000,
    proxy: 
      // '/api': 
      //   target: 'http://localhost:3000',
      //   changeOrigin:true,
      //   pathRewrite:  '^/api': '' 
      // 
    ,
    // 在内置一些方法，它里面的类型过于复杂，可以用any，但在你定义的应用中，尽可能不要用any
    setupMiddlewares: (mids: any, server: any) => 
      // app它就是express的实例对象
      mockFn(server.app)
      // 必须要把mids对象返回
      return mids
    
  

在tsconfig.json修改文件。做到@/路径能被找见：

"baseUrl": ".",
 //在组件中就可以使用@时过来提示文件
 "paths": 
     "@/*":["./src/*"]
 

mock数据：

import type  Request, Response, Application  from 'express'

export default (app: Application) => 
  app.get('/api/users', (req: Request, res: Response) => 
    res.send(
      code: 0,
      msg: 'ok',
      data: [
         id: 1, name: '张三' ,
         id: 2, name: '李四' ,
         id: 3, name: '王五' 
      ]
    )
  )