react使用@引入文件

---

前言

在项目中使用@符代表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"
  },

---

总结

使用@进行引入文件会比较方便，假如文件迁移会导致路径改变，使用@符就不需要担心路径改变导致没有找到文件。