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插件來配置提示。

一、vsCode插件：

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

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

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

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

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

 

測試結果

總結

　　分享一種更高效、快捷的import方式，這樣的import方式既保證了組件式代碼高內聚性、低耦合度的特性，也提升了項目的可維護性，更好的鎖定問題所在。

更多關於customize-cra庫API的使用能夠訪問github的文檔說明，customize-cra庫地址：https://github.com/arackaf/customize-cra/blob/master/api.md