北京各大网站推广平台哪家好,可信网站必须做吗,工业和信息化部发短信什么意思,做a视频网站一、简介 在 Vue 项目当中#xff0c;可以使用 来表示 src/#xff0c;但在 React 项目中#xff0c;默认却没有该功能#xff0c;因此需要进行手动的配置来实现该功能。 别名主要解决的问题#xff1a;每个页面都使用路径的方式进行引入#xff0c;这样很麻烦#xff…一、简介 在 Vue 项目当中可以使用 来表示 src/但在 React 项目中默认却没有该功能因此需要进行手动的配置来实现该功能。 别名主要解决的问题每个页面都使用路径的方式进行引入这样很麻烦效率很低这个时候可以配置一个别名来直接使用别名引入。 使用 craco/craco 的这种方式可以在不释放 React 隐藏配置$ npm run eject的情况下就能解决。
二、js/ts react 项目
// 第一步安装 craco
$ yarn add craco/craco
// 或
$ npm install craco/craco// 第二步修改 package.json 里的 scripts 属性。
scripts: {
- // start: react-scripts start,
- // build: react-scripts build,
- // test: react-scripts test,start: craco start,build: craco build,test: craco test,eject: react-scripts eject
}// 第三步根目录创建 craco.config.js 文件在这里面可以自定义 webpack 相关配置以及插件相关配置算是配置文件的扩展暴露文件
module.exports {// ...
};// 第四步craco.config.js 中配置别名
const path require(path)
module.exports {// webpack 配置webpack: {// 配置别名alias: {// 约定使用 表示 src 文件所在路径: path.resolve(__dirname, src)// ....其他的一些配置}}
}// 第五步在根目录的 jsconfig.json 或 tsconfig.json 中追加配置
// baseUrl 设置为 ./ 也就是设置为了基于 tsconfig.json 的 ./
// paths当中的配置都是基于baseUrl的
// api/*: [src/api/*]
// 代表遇到 import {} from api/* 时就从 src/api/* 中引入
// 这里的规则可以参考 TS 的文档https://www.tslang.cn/docs/handbook/module-resolution.html
{compilerOptions: {baseUrl: ./,paths: {/*: [src/*],api/*: [src/api/*]},// 本地部分语法报错不能识别可选择忽略报错experimentalDecorators: true}
}// 第六步测试
// 在 src/index.tsx 文件中的进行调整测试是否运行正常有无报错。
import App from ./App;
// 改成
import App from /App;
