react中路径起别名

react中路径起别名 前言 一、使用步骤 1.安装 craco/craco 2.修改 package.json 文件(改变启动) 3.在根目录下创建craco.config.js文件(用于修改默认配置) 4.配置路径别名 5.使用配置的路径 注意:修改webpack配置后记得重启哦,有什么问题留言滴滴

前言

项目文件层级越来越多,在我们需要引用文件的时候,多层级的路径不仅繁琐,还容易出错,所以我们需要给比较常用的路径起别名，便于使用管理

一、使用步骤

1.安装 craco/craco

代码如下（示例）：

$ yarn add @craco/craco OR $ npm install @craco/craco --save

2.修改 package.json 文件(改变启动)

代码如下（示例）：

"scripts": { // "start": "react-scripts start", // "build": "react-scripts build", // "test": "react-scripts test", "start": "craco start", "build": "craco build", "test": "craco test", }

3.在根目录下创建craco.config.js文件(用于修改默认配置)

my-app ├── node_modules ├── craco.config.js └── package.json } //注意要package.json 平级 module.exports = { // 配置文件 }

4.配置路径别名

const path = require("path"); const resolve = dir => path.resolve(__dirname, dir); module.exports = { ... , webpack: { alias: { '@': resolve("src"), 'components': resolve("src/components"), } } }

5.使用配置的路径

import CommentInput from '@/components/comment-input'; import CommentItem from 'components/comment-item';

注意:修改webpack配置后记得重启哦,有什么问题留言滴滴