quramy / lerna-yarn-workspaces-example Goto Github PK
View Code? Open in Web Editor NEWHow to build TypeScript mono-repo project with yarn and lerna
License: MIT License
How to build TypeScript mono-repo project with yarn and lerna
License: MIT License
Your build json file looks like:
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "lib"
}
}
Which means that a baseUrl
is not defined. So how are relative package imports like import * as foo from 'x-cli'
going to be resolved?
Any reason you did define it for the "editor" config?
I'm trying to figure out how to get nested module resolution working with this project.
What I mean is modifying the structure to a more real-world example with multiple nested modules, in a domain driven architecture where all our exports are in a domain and referenced by e.g. import { sleep } from '@quramy/x-core/messages/core'
Structure:
- x-cli
-- src
--- main.ts
- x-core
-- src
--- messages
---- core
----- sleep
------ sleep.ts
------ sleep-and-snore.ts
------ index.ts
----- wake
------ wake.ts
------ wake-and-eat.ts
------ index.ts (exports wake and wake-and-eat)
I have modified /tsconfig.json
: and then updated main.ts:
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"baseUrl": "./packages",
"paths": {
"@quramy/x-core/messages/*": ["./x-core/src/messages/*"],
"@quramy/*": ["./*/src"]
}
}
}
// main.ts (this works fine in the IDE, just doesn't build...)
import { sleep, sleepAndSnore } from '@quramy/x-core/messages/core'
export function cli() {
sleep();
sleepAndSnore()
return Promise.resolve(true);
}
cli()
yarn prepare
then gives me this error:
src/main.ts(1,38): error TS2307: Cannot find module '@quramy/x-core/messages/core'.
If I add the paths/baseUrl to the tsconfig.build.json, it will build, but it doesn't run because it can't find the module.
I also get the "source files not under the same rootDir message if I have that compilerOption set under this case: TS6059: File '/home/bthompson/source/lerna-yarn-workspaces-example/packages/x-core/src/messages/core/index.ts' is not under 'rootDir' '/home/bthompson/source/lerna-yarn-workspaces-example/packages/x-cli/src'. 'rootDir' is expected to contain all source files.
Any help would be greatly appreciated!
Hi @Quramy! π
I'm curious how to tsc --watch
all packages in parallel with one command? This can be useful if, say, my packages/x-cli
needs to be linked and tested externally before everything is released. I'd like to be able to change packages/x-core
and see the difference propagated to x-cli
when I use it. Of course, there can be more than two packages in a monorepo, which makes it harder to run tsc -w
in all subfolders one by one.
If you comment out the import
import { awesomeFn } from "@quramy/x-core";
from x-cli/src/main.ts
, and try to auto import it again by typing awesomeFn
somewhere in that file, VSCode doesn't find that symbol nor suggest it for auto import. Why is this?
After I look into your code, I found that in each package you have 2 tsconfig. First is tsconfig.json
and the other is tsconfig.base.json
When you run npm script prepublish
it will compile using tsconfig.base.json
configuration.
"prepublish": "tsc -p tsconfig.build.json"
So, Do we still need the tsconfig.json
since you don't use it?
Hey, thanks for making this example project. It's been really helpful.
There's a package I'm trying to work with (execa
), but some of the typings are incorrect. I'd like to override the @types/execa
typings with my own types in a /package/foo/types
folder, at least temporarily. From what I understand, this should be possible through setting the typeRoots
property in tsconfig like this:
"typeRoots": [
"./node_modules/@types",
"./types/"
]
But I'm not sure which tsconfig file this should be put in. I think I've tried all of them (and restarted vscode in between) but the types in my types
folder aren't being picked up. Where can I place the typeRoots
property so it can be picked up by vscode and tsc when building?
I clone the repo and yarn installοΌthen open x-cli/src/main.ts, vscode error Cannot find module '@quramy/x-core'.ts(2307)
Version: 1.40.0-insider
Commit: 86405ea23e3937316009fc27c9361deee66ffbf5
Date: 2019-11-06T16:56:25.487Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 18.7.0
TypeScript's path mapping is the best solution. Path mappings are declared such as:
The section about path mapping should be either removed from master branch readme or annotated as a deprecated solution for ts 2.x - its not even used anywhere in the repository files, creating confusion for novice users of ts/lerna.
Hi,
thanks for making this example. I was wondering why typescript and ava are declared as devDependencies both in the root package.json and inside the single package.
Good morning my friends
If you can help
I'm having trouble using create-react-native-app on lerna using workspaces
Below I do the step by step, but we see that this way the node_modules folder in the package is not stored
It is necessary to have the node_modules folder in the folder in packages, because you have an android folder with requests to that folder
$ lerna info
System:
OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Binaries:
lerna: v3.22.1
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
Utilities:
Git: 2.25.1 - /usr/bin/git
$ react-native info
info Fetching system and libraries information...
System:
OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Memory: 1.07 GB / 15.56 GB
Shell: 5.0.16 - /bin/bash
Binaries:
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
Watchman: 4.9.0 - /home/linuxbrew/.linuxbrew/bin/watchman
SDKs:
Android SDK:
API Levels: 28, 30
Build Tools: 28.0.3, 30.0.0
System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.7 - /usr/bin/javac
Python: 2.7.18 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ~16.11.0 => 16.11.0
react-native: ~0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
$ python --version
Python 2.7.18rc1
$ python3 --version
Python 3.8.2
$ npm list -g --depth 0
/home/marcio/.nvm/versions/node/v12.18.1/lib
βββ @prettier/[email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
βββ [email protected]
#
cd ~/Downloads
rm -fr ~/Downloads/monorepo-3
mkdir -p ~/Downloads/monorepo-3
cd ~/Downloads/monorepo-3
pwd && ls
echo '{
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}' >lerna.json
cat lerna.json
echo '{
"name": "root",
"private": true,
"workspaces": [
"packages/*"
],
"devDependencies": {
"lerna": "^3.22.1"
}
}' >package.json
cat package.json
lerna init
#
cd packages
npx create-react-native-app default-create-react-native-app --yes
# OR
# react-native init defaultreactnative
# clean
cd ..
yarn check --integrity --verify-tree || true
lerna list --all --long || true
lerna clean --yes || true
pwd && ls
rm -fr node_modules
find . -name "node_modules" -type d
find \
. \
-name "node_modules" \
-o -name ".yarncache" \
-type d -prune | while read ITEM; do
(du -sh "$ITEM")
(rm -fr "$ITEM")
done
find \
. \
-name "*.touch" \
-o -name "*error.log" \
-o -name "*debug.log" \
-o -name "*lock.json" \
-o -name "*lock.yaml" \
-o -name "audit-resolve.json" \
-o -name ".yarnclean" \
-o -name "yarn.lock" \
-type f | while read ITEM; do
(du -sh "$ITEM")
(rm -fr "$ITEM")
done
#
lerna init
lerna info
lerna list --all --long
lerna bootstrap
#
ls && ls ./packages/*
du -sh ./packages/default-create-react-native-app/node_modules/react-native-unimodules/gradle.groovy
du -sh ./packages/default-create-react-native-app/node_modules/react-native/react.gradle
du -sh ./packages/default-create-react-native-app/node_modules/expo-updates/scripts/create-manifest-android.gradle
du -sh ./packages/default-create-react-native-app/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
#
Definition of awesomeFn
jumps to x-core/lib/index.d.ts
, not the expected x-core/src/index.ts
. The previous version jumps right.
[...]
TypeScript's path mapping is the best solution.
How so? If you have a more elaborated (TM) file layout such as:
components/services/*
having modules like @scope/service1
shared/runtime/*
... having modules like `@scope/runtime1models/*
... having modules like @scope/model1
This hinders scalability and it in general a path mapping does not allow to refactor the file layout, without modifying the path mapping.
I think, this is the wrong approach; lerna bootstrap
is explicitly abstracting the file layout of your modules away by sym-linking them correctly. Thus enabling "preserveSymlinks": true
in each individual module's tsconfig.json
is to me the more flexible (and hence better) solution.
However I like your point of view, why you settled with the path mapping option. Care to elaborate?
Typscript has a new feature for monorepo service. Please take a look at microsoft/TypeScript#3469 (comment)
Hey, thanks for sharing this!
I'm transitioning some internal repos and having some problems with imports, namely
src/main.ts(3,17): error TS2307: Cannot find module '@quramy/x-core/foo'.
PR with changes/demo: https://github.com/Quramy/lerna-yarn-workspaces-example/pull/5/files
What am I missing here? It's got to be simple but I have yet to spot it.
Any thoughts?
Hi, have been looking at this code, seems to work, though there are significant differences between the readme and the codebase.
(1) the readme describes use of tsconfig @paths
, yet none of the tsconfig files use this?
(2) instead the packages seem to be mapped as package.json
devDependencies, ie; nothing to do with tsconfig ?
(3) the lone tsconfig.json
file is not referenced by any other config files, instead they all reference the tsconfig.settings.json
file.
So, it seems that the readme describes use of tsconfig references and paths, yet the code (currently) actually uses package.json devDependency references.
What am I missing here?
Given that your solution actually works, what are you thoughts on which way to go?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.