react中路径起别名

2022-04-06 前端工程化

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

前言

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

一、使用步骤

1.安装 craco/craco

1.安装 craco/craco

代码如下（示例）：

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

$ 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",
}

"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 = {
  // 配置文件
}

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"),
    }
  }
}

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';

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

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

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# react

···