Mixing
How to import local package in typescript monorepo
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
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
add a comment |
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
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
add a comment |
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
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
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
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
edited Nov 21 '18 at 14:16
Jaime Sangcap
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
asked Nov 20 '18 at 18:40
Jaime SangcapJaime Sangcap
96611330
96611330
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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)
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
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 '18 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 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 '18 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 '18 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 '18 at 8:32
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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)
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
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 '18 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 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 '18 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 '18 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 '18 at 8:32
|
show 4 more comments
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)
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
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 '18 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 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 '18 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 '18 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 '18 at 8:32
|
show 4 more comments
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)
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
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)
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
edited Nov 22 '18 at 8:31
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
answered Nov 21 '18 at 8:38
Johannes ReuterJohannes Reuter
1,967811
1,967811
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 '18 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 9:27
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 at 9:29
I'm still trying to follow along the examples of the article though.
– Jaime Sangcap
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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.
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
