How to import local package in typescript monorepo
up vote
1
down vote
favorite
Given a monorepo project.
--project_root/
|--packageA/
|--index.ts
|--package.json
|--foo/
|--index.ts
|--packageB/
|--index.ts
|--package.json
|--bar/
|--spam.ts
Normally, when you are in packageA/index.ts
and you want to import packageB/index.ts
you would do import index from '../packageB'
,
and when you are packageA/foo/index.ts
and you want to import packageB/index.ts
you need to move two directory up import index from '../../packageB'
The question is, is there a way to import like import index from 'packageB
and for nested folder import spam from 'packageB/bar/spam'
?
EDIT
I have uploaded a github repo to demo the issue
https://github.com/jaimesangcap/lerna-ts-monorepo
typescript npm
add a comment |
up vote
1
down vote
favorite
Given a monorepo project.
--project_root/
|--packageA/
|--index.ts
|--package.json
|--foo/
|--index.ts
|--packageB/
|--index.ts
|--package.json
|--bar/
|--spam.ts
Normally, when you are in packageA/index.ts
and you want to import packageB/index.ts
you would do import index from '../packageB'
,
and when you are packageA/foo/index.ts
and you want to import packageB/index.ts
you need to move two directory up import index from '../../packageB'
The question is, is there a way to import like import index from 'packageB
and for nested folder import spam from 'packageB/bar/spam'
?
EDIT
I have uploaded a github repo to demo the issue
https://github.com/jaimesangcap/lerna-ts-monorepo
typescript npm
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
Given a monorepo project.
--project_root/
|--packageA/
|--index.ts
|--package.json
|--foo/
|--index.ts
|--packageB/
|--index.ts
|--package.json
|--bar/
|--spam.ts
Normally, when you are in packageA/index.ts
and you want to import packageB/index.ts
you would do import index from '../packageB'
,
and when you are packageA/foo/index.ts
and you want to import packageB/index.ts
you need to move two directory up import index from '../../packageB'
The question is, is there a way to import like import index from 'packageB
and for nested folder import spam from 'packageB/bar/spam'
?
EDIT
I have uploaded a github repo to demo the issue
https://github.com/jaimesangcap/lerna-ts-monorepo
typescript npm
Given a monorepo project.
--project_root/
|--packageA/
|--index.ts
|--package.json
|--foo/
|--index.ts
|--packageB/
|--index.ts
|--package.json
|--bar/
|--spam.ts
Normally, when you are in packageA/index.ts
and you want to import packageB/index.ts
you would do import index from '../packageB'
,
and when you are packageA/foo/index.ts
and you want to import packageB/index.ts
you need to move two directory up import index from '../../packageB'
The question is, is there a way to import like import index from 'packageB
and for nested folder import spam from 'packageB/bar/spam'
?
EDIT
I have uploaded a github repo to demo the issue
https://github.com/jaimesangcap/lerna-ts-monorepo
typescript npm
typescript npm
edited Nov 21 at 14:16
asked Nov 20 at 18:40
Jaime Sangcap
93611330
93611330
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You can do this by specifing the base url and (in more complicated cases) by using path mapping.
If you have a tsconfig.json
in project_root
, you can achieve the desired import strategy by defining
"compilerOptions": {
"baseUrl": "."
}
This works if the package name always corresponds with the folder name of the sub-project.
If this isn't the case, you can use paths
:
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"A": ["packageA"],
"B": ["packageB"],
"A/*": ["packageA/*"],
"B/*": ["packageB/*"]
}
}
This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:
resolve: {
alias: {
A: path.resolve(__dirname, 'packageA/'),
B: path.resolve(__dirname, 'packageB/')
}
}
If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts
(node-ts
and tsconfig-paths
have to be installed via npm)
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly vianode
, you can use npm link. If you update your question, I will update my answer
– Johannes Reuter
Nov 21 at 11:43
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
1
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
|
show 4 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You can do this by specifing the base url and (in more complicated cases) by using path mapping.
If you have a tsconfig.json
in project_root
, you can achieve the desired import strategy by defining
"compilerOptions": {
"baseUrl": "."
}
This works if the package name always corresponds with the folder name of the sub-project.
If this isn't the case, you can use paths
:
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"A": ["packageA"],
"B": ["packageB"],
"A/*": ["packageA/*"],
"B/*": ["packageB/*"]
}
}
This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:
resolve: {
alias: {
A: path.resolve(__dirname, 'packageA/'),
B: path.resolve(__dirname, 'packageB/')
}
}
If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts
(node-ts
and tsconfig-paths
have to be installed via npm)
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly vianode
, you can use npm link. If you update your question, I will update my answer
– Johannes Reuter
Nov 21 at 11:43
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
1
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
|
show 4 more comments
up vote
1
down vote
accepted
You can do this by specifing the base url and (in more complicated cases) by using path mapping.
If you have a tsconfig.json
in project_root
, you can achieve the desired import strategy by defining
"compilerOptions": {
"baseUrl": "."
}
This works if the package name always corresponds with the folder name of the sub-project.
If this isn't the case, you can use paths
:
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"A": ["packageA"],
"B": ["packageB"],
"A/*": ["packageA/*"],
"B/*": ["packageB/*"]
}
}
This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:
resolve: {
alias: {
A: path.resolve(__dirname, 'packageA/'),
B: path.resolve(__dirname, 'packageB/')
}
}
If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts
(node-ts
and tsconfig-paths
have to be installed via npm)
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly vianode
, you can use npm link. If you update your question, I will update my answer
– Johannes Reuter
Nov 21 at 11:43
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
1
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
|
show 4 more comments
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You can do this by specifing the base url and (in more complicated cases) by using path mapping.
If you have a tsconfig.json
in project_root
, you can achieve the desired import strategy by defining
"compilerOptions": {
"baseUrl": "."
}
This works if the package name always corresponds with the folder name of the sub-project.
If this isn't the case, you can use paths
:
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"A": ["packageA"],
"B": ["packageB"],
"A/*": ["packageA/*"],
"B/*": ["packageB/*"]
}
}
This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:
resolve: {
alias: {
A: path.resolve(__dirname, 'packageA/'),
B: path.resolve(__dirname, 'packageB/')
}
}
If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts
(node-ts
and tsconfig-paths
have to be installed via npm)
You can do this by specifing the base url and (in more complicated cases) by using path mapping.
If you have a tsconfig.json
in project_root
, you can achieve the desired import strategy by defining
"compilerOptions": {
"baseUrl": "."
}
This works if the package name always corresponds with the folder name of the sub-project.
If this isn't the case, you can use paths
:
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"A": ["packageA"],
"B": ["packageB"],
"A/*": ["packageA/*"],
"B/*": ["packageB/*"]
}
}
This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:
resolve: {
alias: {
A: path.resolve(__dirname, 'packageA/'),
B: path.resolve(__dirname, 'packageB/')
}
}
If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts
(node-ts
and tsconfig-paths
have to be installed via npm)
edited Nov 22 at 8:31
answered Nov 21 at 8:38
Johannes Reuter
1,92479
1,92479
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly vianode
, you can use npm link. If you update your question, I will update my answer
– Johannes Reuter
Nov 21 at 11:43
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
1
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
|
show 4 more comments
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly vianode
, you can use npm link. If you update your question, I will update my answer
– Johannes Reuter
Nov 21 at 11:43
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
1
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
– Jaime Sangcap
Nov 21 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 at 9:29
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via
node
, you can use npm link. If you update your question, I will update my answer– Johannes Reuter
Nov 21 at 11:43
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via
node
, you can use npm link. If you update your question, I will update my answer– Johannes Reuter
Nov 21 at 11:43
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
– Johannes Reuter
Nov 21 at 11:49
1
1
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
– Johannes Reuter
Nov 22 at 8:32
|
show 4 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399474%2fhow-to-import-local-package-in-typescript-monorepo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown