适用：使用 create-react-app 创建项目，不想 eject 项目但想对项目中 wepback 进行自定义配置的开发者。

1.使用 create-react-app创建一个项目（已有项目跳过此步）

$ npx create-react-app my-project

2.进入项目目录，安装依赖

// 根据项目情况安装
$ npm install antd -S
$ npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D

3.配置craco.config.js（该文件与src同级）

const CracoLessPlugin = require('craco-less')
const path = require('path')const pathResolve = pathUrl => path.join(__dirname, pathUrl)module.exports = {webpack: {alias: {'@@': pathResolve('.'),'@': pathResolve('src'),'@assets': pathResolve('src/assets'),'@common': pathResolve('src/common'),'@components': pathResolve('src/components'),'@hooks': pathResolve('src/hooks'),'@pages': pathResolve('src/pages'),'@store': pathResolve('src/store'),'@utils': pathResolve('src/utils')// 此处是一个示例，实际可根据各自需求配置}},babel: {plugins: [['import', { libraryName: 'antd', style: true }],['@babel/plugin-proposal-decorators', { legacy: true }]]},plugins: [{plugin: CracoLessPlugin,options: {// 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档lessLoaderOptions: {lessOptions: {modifyVars: {},javascriptEnabled: true}}}}]
}

4.修改 package.json 中的 scripts

  "scripts": {"start": "set PORT=5000 && craco start","build": "set GENERATE_SOURCEMAP=false && craco build","test": "craco test"},

上面用到了两个环境变量：
PORT 启动端口
GENERATE_SOURCEMAP 打包时是否生成 sourceMap

5.创建 jsconfig.json

{"compilerOptions": {"baseUrl": "./","paths": {"@@/*": ["./*"],"@/*": ["src/*"],"@assets/*": ["src/assets/*"],"@common/*": ["src/common/*"],"@components/*": ["src/components/*"],"@hooks/*": ["src/hooks/*"],"@pages/*": ["src/pages/*"],"@store/*": ["src/store/*"],"@utils/*": ["src/utils/*"]},"experimentalDecorators": true},"exclude": ["node_modules", "build"]
}

根据项目实际情况配置 craco.config.js 中别名即可，其他更详细配置可以参考 vscode 官方文档。

原文链接：使用 craco 配置基于 create-react-app 的开发环境

6.遇到的问题

遇到此类问题可能是配置冲突导致，尝试修改craco.config.js

将上边配置的craco.config.js修改为：

const path = require('path')module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定：使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src')}}
}

重启项目，antd--Button即可正常使用

React项目使用craco（由create-react-app创建项目）相关推荐

ssm 项目cannot resolve package_前端工程化之创建项目
前言在我们团队,刚开始创建项目,是直接使用框架的 cli 进行创建项目,并修改相关配置.随着项目的增多,沉淀了两套模板,平台端及移动端.后来,我们自己写了一个简单的 cli,并提供了 create ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
React 开发环境的搭建（React脚手架）
1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServer-) 下载好了所有相关的依赖可以直接运行一个简 ...
react安装_「React实战」三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...
自学Python第二十二天- Django框架(一)创建项目、APP、快速上手、请求和响应流程、模板、数据库操作
Django 框架是一个基于 python 的重量级的 web 开发框架,现今很多大公司大项目都是使用 Django 框架.采用了 MVC(model view controller) 的框架模式,p ...
vue创建项目卡住不动，vue create project卡住不动
第一种方法: 好久没有创建vue新项目了,今天创建了一个新项目,一运行 vue init webpack project_name 就卡住不动,换 vue create project_name 也是 ...
华为手表开发：WATCH 3 Pro（3）创建项目以及运行完整流程
华为手表开发:WATCH 3 Pro(3)创建项目以及运行完整流程初环境与设备创建项目创建项目入口配置项目运行项目报错需要在 Appgallery Connect , 创建项目,然后在 ...
Android Studio创建项目
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010046908/article/details/47000873 创建项目首先,先指出Andr ...

React项目使用craco（由create-react-app创建项目）

1.使用 create-react-app创建一个项目（已有项目跳过此步）

2.进入项目目录，安装依赖

3.配置craco.config.js（该文件与src同级）

4.修改 package.json 中的 scripts

5.创建 jsconfig.json

6.遇到的问题

React项目使用craco（由create-react-app创建项目）相关推荐

最新文章

热门文章