react import 配置路徑別名'@'，簡化import Component的方式

摘要

在react中，大多數業務邏輯都組件化；極大的減輕了代碼的冗余度，如果組件的層次比較深的話，組件的import就比較費勁，在import時使用“../../components/test”的方式，組件的import就會稍顯混亂、組件代碼不容易維護。為了可高效的、快速的維護組件代碼，廢棄“../../”的組件引入方式，配置一個組件路徑重寫的方式引入組件。

配置內容

　　我在之前就介紹過在react中引入less的配置，同樣的為了配置一個路徑別名，使用customize-cra來覆寫webpack底層配置。(配置覆寫webpack需要的插件以及第三方庫就不在復述，不清楚的可以去參考Ant Design官方的配置說明)

路徑別名重寫方式一

const { override } = require('customize-cra');
const path = require("path");
 
module.exports = override(
     config =>{
         config.resolve.alias = {
             "@": path.resolve(__dirname, "src")
         };
         return config;
     },
);

路徑別名重寫方式二

const { override, addWebpackAlias } = require('customize-cra');
const path = require("path");
 
module.exports = override(
    addWebpackAlias({
        ["@"]: path.resolve(__dirname, "src")
    }),
);

Example-實例展示

App.js父組件代碼

import React, { useState } from 'react'
import style from './App.module.less'
import { Home } from '@/pages/home'; //@方式引入Home組件
 
class App extends React.Component {
    render() {
        return (
            <div className={style.box}>
                <Home name='傑瑞與湯姆'/>
            </div>
        );
    }
}
export default App;

Home.js子組件代碼

import React, { Component } from 'react';
import { Button } from 'antd';
 
export class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                <Button type='danger'>{this.props.name}</Button>
            </div>
        );
    }
}

配置@路徑智能提示

　　在測試過程中，雖然應用了@引入組件的方式，但是在引用過程中沒有智能提示組件路徑，為了解決智能提示問題，安裝Path Intellisence插件來配置提示。

1、vsCode插件：

　　Path Intellisence（在插件庫中查找並下載插件）

2、vsCode中setting.json配置插件功能：（打開vscode編輯器設置，在設置中打開setting.json文件）

// 配置@路徑智能提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }

3、在項目package.json所在同級目錄下創建文件jsconfig.json：

{
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
  },
  "exclude": [
      "node_modules"
  ]
}