react使用craco配置@符号作为src文件路径

在使用react时,导入组件经常会出现'…/…/…/'来指代文件所在文件夹,很不美观,在vue中使用@符号指向src目录,所以仿照vue来配置src路径;

1:安装

npm i @craco/craco

2:修改package.json文件,将craco作为执行文件

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

3:配置craco.config.js

在根目录新建craco.config.js文件

const path = require("path")//导入path模块
//定义函数resolve,将你想要自定义的路径和js的根路劲作拼接
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  webpack: {
    alias: {
       // 名称:路径
      "@": resolve("src")
    }
  }
};

版权声明:
作者:歪脖札记
链接:https://www.zxlmx.com/zhaji/qianduan/react/137.html
来源:歪脖札记
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>