前言
在项目中使用@符代表src路径引入文件会方便很多,层级会比较明确。@符代表src目录是配置出来的,也可以代表其他路径!
一、下载@craco/craco
npm install -s @craco/craco
或
yarn add @craco/craco
二、使用步骤
1.创建craco.config.js文件
在src同级目录下创建craco.config.js,并配置以下配置项
const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
webpack: {
alias: {
// @代表src目录
"@": resolve("src"),
"components": resolve("src/components")
}
}
}
2.修改启动路径
将package.json文件中找到scripts配置项并进行更改。
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
总结
使用@进行引入文件会比较方便,假如文件迁移会导致路径改变,使用@符就不需要担心路径改变导致没有找到文件。