解決基於TypeScript 的 RN項目相對路徑引入組件的問題

1、前言

在開發RN項目時，常常會要使用這樣的方式(../../../)來引入組件，感受很是繁瑣，若是項目結構層級比較多，引入的頭部更加分不清. 那有沒有一種方案和vue項目同樣，通過配置後簡寫路徑，在引入的時候，直接使用，例如vue項目中 @ 符號表示 src目錄. 通過百度後，發現仍是有這種相似的配置. 但嘗試過網上的幾種方案，都沒起做用，主要是因爲個人項目是基於 RN(0.59.5) + TypeScript搭建的。

2、嘗試過的錯誤方案

1. 在文件夾中加入 package.json

例如你想引入utils裏面的文件，不想../../../..，這樣引入，而是想@utils/.....這樣引入，那麼你就能夠在utils文件中放一個package.json，裏面以下：

1. {
2.      name:"@utils"
3. }

該方案，我嘗試以後沒有成功，項目中的 ts文件有規則校驗，會有錯誤提示，找不到該模塊。 若是不是用TypeScript構建的項目，我想是能夠的。

2. 安裝 babel-plugin-root-import

這種方案，網上搜索是最多的. 網上所描述的具體實現，這裏不撰寫了，反正我按照網上的步驟配置，沒有成功。估計也是隻適合於ES6構建的項目。

以上兩種方案，參考 react-native 相對項目路徑導入組件, 感謝暖暖的風兒 給我提供了些思路

3. 使用@providesModule

在文件的頂部，嵌套一個多行註釋，把@providesModule放在註釋裏,@providesModule後添加類名,之後就直接使用類名就能導入了。

注意，帶有@providesModule的多行註釋，必定要是文件的第一個多行註釋。如:

1. /**
2.  * @providesModule Common
3.  */
4. import {
5.     Dimensions
6. } from 'react-native';
7. export default class Common {
8.     static bgColor = 'rgb(232,232,232)';
9.     static screenW = Dimensions.get('window').width;
10.     static screenH = Dimensions.get('window').height;
11. }

外部使用Common

1. // 之前須要這樣
2. // import Common from './../Common/Common'
3.    
4. // 如今能夠直接用類名
5. import Common from 'Common'

   嘗試以後，ts的校驗，仍是會報錯. 這種方案主要是參考ReactNative之解決文件導入路徑問題, 這篇文章中有介紹@providesModule的原理，有興趣的同窗，請拜讀。

4. 使用typescript path mapping設置相對路徑

由於項目是用TypeScript構建的，在嘗試幾種錯誤思路後，而後想TypeScript是否是原本就支持路徑設置？確實，TypeScript是支持設置相對路徑的. 網上提供的方案

在 tsconfig.json 中設置

1. {
2.   "baseUrl": "./",
3.   "path": {
4.     "@http/*": ["src/http/*"],
5.     "@utils/*": ["src/utils/*"]
6.   }
7. }

這樣在 import 的時候就不用使用一長串的 ../../../.. 這種形式了，直接使用相對短路徑

1. import {AuthService} from '@http/Auth';

   採用這種方案以後，在ts文件中的校驗不報錯了，也能直接連接到對應的申明。但編譯爲javascript後，路徑並無映射過去，生成apk的時候報錯，提示找不到對應的模塊。

   至此，我已發現，只要解決此編譯問題，那麼就能解決了。可是發現沒有這麼簡單，後又嘗試了引入 module-alias, tsmodule-alias等插件來解決此編譯問題都沒有成功，估計是沒有用正確。

3、最終方案

輪番嘗試以上的幾種錯誤方案後，反覆搞了一天，心累了。哎，還好沒有最終放棄，在上述的第2種方案中，我引入了babel-plugin-root-import插件， 發現可使用某個符號替代路徑.

1.安裝 babel-plugin-root-import

npm install babel-plugin-root-import --save-dev 或 yarn add babel-plugin-root-import –dev 

   

若是 npm 沒有安裝成功，就用 yarn (我是使用yarn 才安裝成功)

2.babel.config.js 增長以下配置

1. module.exports = {
2.   plugins: [
3.     [
4.       'babel-plugin-root-import',
5.       {
6.         rootPathPrefix: '~', // `~` 默認
7.         rootPathSuffix: 'src'
8.       }
9.     ]
10.   ]
11. }

這裏，我嘗試過rootPathPrefix 用 @ ， 在編譯的時候會報錯。因此不得不放棄使用@ (有些強迫症，想要用@, 由於vue項目中就是@表示src目錄)

3.執行npm start -- --reset-cache命令

已有項目，記得執行此命令清理緩存，這點很是重要，我在調試的過程當中，變動過幾回符號的配置，若是變動配置後沒有執行該命令，則配置不起做用

4. 設置typescript相對路徑

在 tsconfig.json 中設置

1.  {
2.  "baseUrl": "./",
3.   "path": {
4.     "~/*": ["src /*"],
5.   }
6. }

注意:變動設置以後，最好重啓下VSCode

至此，咱們在項目中引入文件能夠用如下優雅的方式

1. import { UserAccount } from '~/constants/const'
2. import MyTheme from '~/assets/commonStyle'

   

4、總結

項目是使用 TypeScript + Dva構建的RN項目，該問題網上給出的一些方案都是基於 ES6構建的RN項目，因此以前的解決方案，都不適應。再加上我學習TypeScript 和 RN的時間不長，不少理論知識學習不到位。因此花了比較長的時間。我正在搭建基於TypeScript + Dva + RN + React-Navigation 的App開發框架，歡迎有興趣的同窗一塊兒交流。後續，也會把我搭建的項目框架，進行開源, 目前還只實現了一些基礎建設，哈哈~~。

如下是我項目框架的目錄: