@@ -41,9 +41,11 @@ Add it to _plugins_ in your _tsconfig.json_
41
41
}
42
42
}
43
43
```
44
+
44
45
#### Example result
45
46
46
47
` core/index.ts `
48
+
47
49
``` tsx
48
50
// The following transforms path to '../utils/sum'
49
51
import { sum } from " @utils/sum" ;
@@ -53,10 +55,10 @@ import { sum } from "@utils/sum";
53
55
54
56
- ** Compile with ` tsc ` ** — Use [ ts-patch] ( https://github.com/nonara/ts-patch )
55
57
58
+ - ** Use with ts-node** — Add ` typescript-transform-paths/register ` to ` require ` config.
59
+
60
+ ` tsconfig.json `
56
61
57
- - ** Use with ts-node** — Add ` typescript-transform-paths/register ` to ` require ` config.
58
-
59
- ` tsconfig.json `
60
62
``` jsonc
61
63
{
62
64
" ts-node" : {
@@ -72,6 +74,7 @@ import { sum } from "@utils/sum";
72
74
- ** Use with NX** — Add the ` typescript-transform-paths/nx-transformer ` to project config
73
75
74
76
` project.json `
77
+
75
78
``` jsonc
76
79
{
77
80
/* ... */
@@ -81,7 +84,7 @@ import { sum } from "@utils/sum";
81
84
" options" : {
82
85
/* ... */
83
86
" transformers" : [
84
- {
87
+ {
85
88
" name" : " typescript-transform-paths/nx-transformer" ,
86
89
" options" : { " afterDeclarations" : true }
87
90
}
@@ -93,6 +96,7 @@ import { sum } from "@utils/sum";
93
96
```
94
97
95
98
## Virtual Directories
99
+
96
100
TS allows defining
97
101
[ virtual directories] ( https://www.typescriptlang.org/docs/handbook/module-resolution.html#virtual-directories-with-rootdirs )
98
102
via the ` rootDirs ` compiler option.
@@ -101,10 +105,10 @@ To enable virtual directory mapping, use the `useRootDirs` plugin option.
101
105
``` jsonc
102
106
{
103
107
" compilerOptions" : {
104
- " rootDirs" : [ " src" , " generated" ],
108
+ " rootDirs" : [" src" , " generated" ],
105
109
" baseUrl" : " ." ,
106
110
" paths" : {
107
- " #root/*" : [ " ./src/*" , " ./generated/*" ]
111
+ " #root/*" : [" ./src/*" , " ./generated/*" ]
108
112
},
109
113
" plugins" : [
110
114
{ " transform" : " typescript-transform-paths" , " useRootDirs" : true },
@@ -126,36 +130,40 @@ To enable virtual directory mapping, use the `useRootDirs` plugin option.
126
130
```
127
131
128
132
` src/file1.ts `
133
+
129
134
``` ts
130
- import ' #root/file2.ts' // resolves to './file2'
135
+ import " #root/file2.ts" ; // resolves to './file2'
131
136
```
137
+
132
138
` src/subdir/sub-file.ts `
139
+
133
140
``` ts
134
- import ' #root/file2.ts' // resolves to '../file2'
135
- import ' #root/file1.ts' // resolves to '../file1'
141
+ import " #root/file2.ts" ; // resolves to '../file2'
142
+ import " #root/file1.ts" ; // resolves to '../file1'
136
143
```
137
144
138
145
## Custom Control
139
146
140
147
### Exclusion patterns
141
148
142
149
You can disable transformation for paths based on the resolved file path. The ` exclude ` option allows specifying glob
143
- patterns to match against resolved file path.
150
+ patterns to match against resolved file path.
144
151
145
152
For an example context in which this would be useful, see [ Issue #83 ] ( https://github.com/LeDDGroup/typescript-transform-paths/issues/83 )
146
153
147
154
Example:
155
+
148
156
``` jsonc
149
157
{
150
158
" compilerOptions" : {
151
159
" paths" : {
152
- " sub-module1/*" : [ " ../../node_modules/sub-module1/*" ],
153
- " sub-module2/*" : [ " ../../node_modules/sub-module2/*" ],
160
+ " sub-module1/*" : [" ../../node_modules/sub-module1/*" ],
161
+ " sub-module2/*" : [" ../../node_modules/sub-module2/*" ]
154
162
},
155
163
" plugins" : [
156
- {
157
- " transform" : " typescript-transform-paths" ,
158
- " exclude" : [ " **/node_modules/**" ]
164
+ {
165
+ " transform" : " typescript-transform-paths" ,
166
+ " exclude" : [" **/node_modules/**" ]
159
167
}
160
168
]
161
169
}
@@ -164,7 +172,7 @@ Example:
164
172
165
173
``` ts
166
174
// This path will not be transformed
167
- import * as sm1 from ' sub-module1/index'
175
+ import * as sm1 from " sub-module1/index" ;
168
176
```
169
177
170
178
### @transform-path tag
@@ -173,7 +181,7 @@ Use the `@transform-path` tag to explicitly specify the output path for a single
173
181
174
182
``` ts
175
183
// @transform-path https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
176
- import react from ' react' // Output path will be the url above
184
+ import react from " react" ; // Output path will be the url above
177
185
```
178
186
179
187
### @no-transform-path
@@ -182,7 +190,7 @@ Use the `@no-transform-path` tag to explicitly disable transformation for a sing
182
190
183
191
``` ts
184
192
// @no-transform-path
185
- import ' normally-transformed' // This will remain 'normally-transformed', even though it has a different value in paths config
193
+ import " normally-transformed" ; // This will remain 'normally-transformed', even though it has a different value in paths config
186
194
```
187
195
188
196
## Articles
0 commit comments