TypeScript solve the problem of the introduction of components of the project relative path based RN

I. Introduction

RN in the development of the project, often to be used in this way (../../../) to introduce components, feel very cumbersome, if the project structure level more, the head of the introduction of more hard to tell. It has there is no vue programs and projects, through the short path configuration, when introduced directly, for example, the @ symbol indicates vue project src directory. after Baidu, found or have such a similar configuration, but tried online several programs did not work, mainly because of my project is based on the RN (0.59.5) + TypeScript built.

Second, the program tried mistakes

1. Add a folder package.json

For example, you want to introduce utils inside the file, do not want to .. / .. / .. / .., this introduction, but to @utils / ..... this introduction, then you can put a package in the file utils .json, which follows :

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

The program, after I tried without success, ts files in the project have regular check, an error message will not find the module. If the project is not built with TypeScript, I believe it is possible.

2. Installation babel-plugin-root-import

This program is the largest online search. Concrete realization of the Internet as described here is not to write, anyway, I follow the steps online configuration, without success. The estimate is only suitable for ES6 construction project.

More than two options, refer react-native path relative to the project to import components , thanks to the warm wind gave me some ideas

3. 使用@providesModule

In the top of the file, nest a multi-line comment, the @providesModule on a comment, add the class name after the @ providesModule, the future will be able to directly import the class name.

Note that multi-line comments with @providesModule, and it must be the first multi-line comment file. Such as:

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 for external use

1. // this previously required
2. // import Common from './../Common/Common'
3.    
4. // can now directly use the class name
5. import Common from 'Common'

   After trying, ts check, or error. This program is mainly a reference ReactNative file into the path of solving the problem , this article has introduced the principle of @providesModule, interested students, please read it.

4. typescript path mapping disposed relative path

TypeScript because the project is built, after trying several wrong idea, then think TypeScript is not inherently support path settings? Indeed, TypeScript is set to support a relative path. Program available online

Set in the tsconfig.json

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

So that when the import do not use this form .. ../../../ long list, and relatively short path directly

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

   After using this scheme, parity ts in the file is not given, it can be directly linked to the corresponding declaration. But after compiling javascript, paths and not mapped in the past, when the error is generated apk, suggesting no corresponding module.

   So far, I have found, as long as the compiler resolve this problem, can be solved. But I found not so simple, then tried to introduce Module-Alias , tsmodule-Alias and other plug-in to resolve this problem have not been successful compilation, estimated to be of no use correctly.

Third, the final plan

After several more turns trying to program errors, repeatedly engage in one day, tired heart. Hey, but fortunately it did not give up eventually, in the first two kinds of programs, I introduced babel-plugin-root-import plug-ins, you can use a symbol found an alternative path.

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'

   

四、总结

项目是使用 TypeScript + Dva构建的RN项目，该问题网上给出的一些方案都是基于 ES6构建的RN项目，所以之前的解决方案，都不适应。再加上我学习TypeScript 和 RN的时间不长，很多理论知识学习不到位。所以花了比较长的时间。我正在搭建基于TypeScript + Dva + RN + React-Navigation 的App开发框架，欢迎有兴趣的同学一起交流。后续，也会把我搭建的项目框架，进行开源, 目前还只实现了一些基础建设，哈哈~~。

以下是我项目框架的目录: