React大屏脚手架作者西西子

作者: 小周 2023-12-01 03:35:48
阅读(91)
create-react-app初始化#使用了create-react-app的typescript模板yarncreatereact-appmy-big-screen--templatetypescript#初始化之后进入my-big-screen文件目录下执行yarnstart#localhost:3000就能看到react的hello页面了2.引入antdUI库#在根目录下yarnaddantd3.使用craco插件来自定义配置安装cracoyarnadd@craco/craco修改package.json文件如下#原本"scripts":{"start":"react-scriptsstart","build":"react-scriptsbuild","test":"react-scriptstest","eject":"react-scriptseject"}#修改之后"scripts":{"start":"cracostart","build":"cracobuild","test":"cracotest","eject":"cracoeject"}在根目录添加craco.config.js文件module.exports={}4.自定义antd主题,使用less作为css预处理器安装craco-antdyarnaddcraco-antd修改craco.config.js文件constCracoAntDesignPlugin=require('craco-antd');module.exports={plugins:[{plugin:CracoAntDesignPlugin,options:{customizeTheme:{'@primary-color':'#1DA57A',},},},],};5.使用craco-less.module.less来模拟vue组件中style的scope功能craco-less依赖已经内置在@craco/craco依赖中,无需主动安装配置craco.config.js文件constCracoAntDesignPlugin=require('craco-antd')constCracoLessPlugin=require('craco-less')const{loaderByName}=require('@craco/craco')module.exports={plugins:[{plugin:CracoAntDesignPlugin,options:{customizeTheme:{'@primary-color':'#1DA57A'}}},{plugin:CracoLessPlugin,options:{modifyLessRule(lessRule,context){//Youhavetoexcludethesefilesuffixesfirst,//ifyouwanttomodifythelessmodule'ssuffixlessRule.exclude=/\.m\.less$/returnlessRule},modifyLessModuleRule(lessModuleRule,context){//ConfigurethefilesuffixlessModuleRule.test=/\.m\.less$///Configurethegeneratedlocalidentname.constcssLoader=lessModuleRule.use.find(loaderByName('css-loader'))cssLoader.options.modules={localIdentName:'[local]_[hash:base64:5]'}returnlessModuleRule}}}]}配置*./src/react-app-env.d.ts*文件/////定义在全局的变量然后就可以window.*进行访问了interfaceWindow{__REDUX_DEVTOOLS_EXTENSION_COMPOSE__:anyAMap:any}declaremodule"*.module.less"{constclasses:{readonly[key:string]:string};exportdefaultclasses;}使用示例(类似vuescope的效果)#index.module.less文件命名app{font-size:40px;color:#f00;}#在组件中引入importstylesfrom'./index.module.less'hello
6.使用ESLintPrettier两个插件来做代码格式校验和自动格式化7.以上操作版本记录{"name":"xxx","version":"0.1.0","private":true,"dependencies":{"@craco/craco":"^6.2.0","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event":"^12.1.10","@types/jest":"^26.0.15","@types/node":"^12.0.0","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/react-router-dom":"^5.1.8","@typescript-eslint/eslint-plugin":"^4.30.0","@typescript-eslint/parser":"^4.30.0","antd":"^4.16.13","craco-antd":"^1.19.0","eslint":"^7.32.0","eslint-config-alloy":"^4.3.0","eslint-loader":"^4.0.2","eslint-plugin-react":"^7.25.1","react":"^17.0.2","react-dom":"^17.0.2","react-redux":"^7.2.4","react-router-dom":"^5.2.1","react-scripts":"4.0.3","typescript":"^4.1.2","web-vitals":"^1.0.1"},"scripts":{"start":"setPORT=3090&&cracostart","build":"cracobuild","test":"cracotest","eject":"cracoeject","lint":"eslint'{src}/**/*.{ts,tsx,js,jsx}'","lint_fix":"eslint{src}--ext.ts,.tsx,.js,jsx--fix"},"browserslist":{"production":[">0.2%","notdead","notop_miniall"],"development":["last1chromeversion","last1firefoxversion","last1safariversion"]}}
今日热闻