react之@路径解析配置和联想配置

react之@路径解析配置和联想配置

一、介绍

  • 1.路径解析配置(webpack),把 @/ 解析为 src/
  • 2.路径联想配置(VsCode),VsCode 在输入 @/ 时,自动联想出来对应的 src/下的子级目录

二、路径解析配置

  • 1.安装craco
bash 复制代码
npm i craco
  • 2.项目根目录下创建配置文件 craco.config.js
javascript 复制代码
const path = require('path')

module.exports = {
  //webpack配置
  webpack: {
    //配置别名
    alias: {
      //约定:使用@标识src文件所在路径
      '@': path.resolve(__dirname, 'src'),
    },
  },
}
  • 3.包文件中配置启动和打包命令 package.json
bash 复制代码
"scripts": {
    "start": "craco start",
    "build": "craco build",
  },

三、联想路径配置

  • 根目录下新增配置文件 - jsconfig.json
bash 复制代码
  {
      "compilerOptions":{
        "baseUrl":"./",
        "paths":{
          "@/*":[
            "src/*"
          ]
        }
      }
    }
  • 实现效果
相关推荐
非专业程序员几秒前
一文读懂Font文件
前端
Asort2 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer3 分钟前
什么是 React 中的远程组件?
前端·react.js
我是日安6 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑6 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码9 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉10 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin10 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript
RoyLin12 分钟前
TypeScript设计模式:观察者模式
前端·后端·typescript
干就完了114 分钟前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript