react配置根目录@表示src/

736 阅读1分钟

1.安装 npm i customize-cra react-app-rewired

2.根目录新建 config-overrides.js

const path = require('path')
	const { override, addWebpackAlias } = require('customize-cra')

	// 添加 @ 别名
	const webpackAlias = addWebpackAlias({
	  '@': path.resolve(__dirname, 'src'),
	})

	// 导出要进行覆盖的 webpack 配置
	module.exports = override(webpackAlias)

3.根目录新建 path.tsconfig.json

	{
	  "compilerOptions": {
	    "baseUrl": "./",
	    "paths": {
	      "@/*": ["src/*"]
	    }
	  }
	}

4.根目录中的 tsconfig.json 引入路径配置

	{
	+"extends": "./path.tsconfig.json",
 	 "compilerOptions": {
   	 "target": "es5",

5.在 package.json 中修改启动命令

  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

搞定。在项目中使用@来爽一下吧~