创建项目、craco配置项目的目录别名

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量197 收藏
点赞数
分类专栏： react+typescript 文章标签： javascript typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35905501/article/details/128820010
版权

创建项目、craco配置项目的目录别名

1、创建项目

在typescript流行之前，大家都是React + JavaScript；后来TypeScript流行之后，
大家都是在原来的项目上，在自己配置typescript；

创建react项目，在自己配置typescript的弊端：
	1. 弊端一：项目基于webpack
		webpack所有的配置是隐藏的
		eject暴露
		从0开始配置 很麻烦 而且容易出错
	2. 弊端二：Typescript React项目的配置有难度
		Typescript Compiler：tsc    只是类型检测
		Label：把我们最终ts转化成js

所以现在一般都是采用命令的形式创建新的项目

	create-react-app hbin_music --template typescript
	yarn create react-app hbin_music --template typescript

2、craco配置项目的目录别名

craco:  create-react-app config的缩写

请添加图片描述

追逐蓦然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 引用路径的简易调整，使用craco插件
weixin_48192626的博客
07-14 2712
在react框架中，为了避免在引用路径中会用到../../，在层级较深的情况下，容易在引用路径时用到大量的.和/的组合，使代码看起来比较凌乱。而将相对路径改变为绝对路径，并用简单的符号代替某一特定层级文件名称，如@代替src，@@代替src/component，@redux代替src/redux......可以更加直观的看到文件的引用位置，无需翻出再翻进来引用文件。 推荐使用方法2或3 1.拆分react-script，暴露配置文件，该过程不可逆 creat...
npm打包项目 修改css/js等文件输出路径
逻辑无道
12-01 868
import path from 'path'; function getModulePackageName(module) { if (!module.context) return null; const nodeModulesPath = path.join(__dirname, '../node_modules/'); if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) { .
@craco/craco复写cra项目配置
Suk__的博客
02-04 3003
cra内置了HtmlWebpackPlugin插件,直接用cra的getPlugin方法获取插件实例即可。cra默认打包后的产物文件夹名build,我们习惯性的叫dist。
React简单项目，熟悉项目大致完整流程
qq_39608291的博客
02-20 752
react的简单项目的的大致完整开发流程，包含了生产，导包，登录token，token持久化，项目的打包等
craco更改打包后默认打包文件名为dist
weixin_48192626的博客
07-19 2862
React更改配置如果采用eject将react-script拆分不可逆，故推荐使用第三方插件craco来更改一配置，如路径变化等，如需要可参照上一篇文章；而在craco的配置后如需对打包后的文件名进行更改，方式如下。在npm run build 打包命令后，生成的文件夹“build”需更改为“dist” 在craco.config.js文件中，添加如下代码 module.exports = { webpack: { alias: { },...
创建react18-typescript项目
qq_40243950的博客
08-16 598
create-react-app从零创建react项目，使用@craco/craco配置webpack
storybook-preset-craco:Craco故事书的预设
05-12
:hammer_and_wrench: 正在安装纱yarn add storybook-preset-craconpm npm i storybook-preset-craco :graduation_cap: 用法基本的首先，将此预设安装到您的项目中。 # Yarnyarn add -D storybook-preset-craco# npm...
react-tailwind-starter:带有顺风CSS和Craco配置的React Starter
03-08
在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器...
quick-react-cli：方便地使用基本配置创建react项目
03-04
快速Reactcli 方便地使用基本配置创建React项目｀ npx quick-react-cli [您的项目名称]｀ 创建一个带有打字稿，craco，axios，proxy，eslint，漂亮，路线，布局的react项目。 提交可能触发eslint。 现在，它只有一个...
craco：创建React App配置覆盖，这是用于create-react-app的简单易懂的配置层
02-05
通过在应用程序的根目录中添加单个craco.config.js文件，并自定义eslint，babel，postcss配置等，无需使用“弹出”即可获得create-react-app和自定义的所有好处。 您所需要做的就是使用创建您的应用并使用craco....
craco-fast-refresh:[:warning:DEPRECATED]一个Craco插件，用于为React组件启用“快速刷新”（也称为热刷新）
04-30
欢迎来到craco-fast-refresh :waving_hand: 一个Craco插件，用于为React组件启用“快速刷新”（以前也称为热刷新）。 什么是快速刷新 React Fast Refresh是的替代品。 快速刷新使您的React应用程序在代码更改时...
react脚手架项目craco可配置化后如何应用tailwindcss【待后续更新完善】
qq_35306736的博客
10-30 1398
一些关键插件的版本: 全局插件: create-reat-app:^3.4.1 npx:^6.9.0 项目插件 ``` "@craco/craco":"^5.6.4", "craco-less":"^1.17.0", "postcss":"^8.1.4", "postcss-loader":"^4.0.4", "tailwindcss":"^1.9.6", "typescript":"~3.7.2" ``` 《craco配...
react+ts开启旅游电商项目（项目初期准备，引入craco,antd，配置别名，usehooks适配，resetful,引入redux，redux-thunk,immutable，）
lin_fightin的博客
04-08 1321
项目第一步 确认业务 旅游电商电商四套主线业务：展示旅游路线，网站登录，购物车结果，下单购买 二级业务：主页推荐，关键词搜索，登陆注册，购物车操作，订单历史记录 所以可以分成四个模块，产品模块，用户模块，购物模块，订单模块 产品模块：主页推荐，关键词搜索， 展示旅游路线 用户模块： 登陆注册 购物模块: 购物车操作 订单模块: 订单历史记录 流程规划 安装ts的css模块化 cnpm isntall typescript-plugin-css-modules --save 组件库使用antd, 考虑一个
react Ant Design 中 craco 配置 及 装饰器的配置
北芒的博客
07-17 5025
官方文档 查阅 下载安装 yarn add antd 安装 antd yarn add @craco/craco 安装 craco yarn add craco-less 下载 less ，支持 less 格式文件 yarn add @babel/plugin-proposal-decorators 下载支持装饰器使用的模块 package.json 中修改属性 "scripts": { "start": "craco start", "build": ".
React项目使用craco（由create-react-app创建项目）
weixin_57844432的博客
11-22 3243
craco适用：使用 create-react-app 创建项目，不想 eject 项目但想对项目中 wepback 进行自定义配置的开发者。
antd pro 无法修改或者覆盖样式
hzxOnlineOk的博客
10-28 3057
antd pro 创建的项目，一般会生成一个global.less文件 在该文件中写覆盖样式类名及其属性即可
REACT实战项目从0到1搭建（仅供参考）
热门推荐
不怕麻烦的鹿丸的博客
12-06 1万+
按照。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 430
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1017
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
react craco 配置跨域
05-31
2. 在项目根目录下创建 `setupProxy.js` 文件。 3. 在 `setupProxy.js` 文件中添加以下代码： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值