Yarn workspaces9/20/2023 ![]() ![]() ![]() Let Metro know where to resolve packages and in what order extraNodeModules = monorepoPackages // 2. If your monorepo tooling creates workspace symlinks in the `node_modules` folder, // you can either add symlink support to Metro or set the `extraNodeModules` to avoid the symlinks. watchFolders = // Add the monorepo workspaces as `extraNodeModules` to Metro. Watch the local app folder, and only the shared packages (limiting the scope and speeding it up) // Note how we change this from `workspaceRoot` to `projectRoot`. Typically, these are the ones that are installed with an asterisk (*) in your package.json. You can speed things up by only watching the packages your app uses. Setting this path to the root of your monorepo will force Metro to watch all files within the repository and possibly cause a slow initial startup time.Īs your monorepo increases in size, watching all files within the monorepo becomes slower. If a file is outside of that scope, Metro won't be able to find it. Each of these directories must be within the scope of the watchFolders. When using monorepos, your app dependencies splits up into different directories. This default setting works great for apps that don't use a monorepo structure. Metro does that with the watchFolders option, which is set to the project directory by default. During the first phase, Resolution, Metro resolves your app's required files and dependencies. This post’s working example project can be found on GitHub.Metro has three separate stages in its bundling process, documented here. But in my opinion it’s worth it! I’d encourage you to split your project into multiple workspaces, whether that’s with NPM, Yarn, PNPM, or Lerna. And by veering off the beaten path, you’re more likely to encounter compatibility issues across the ecosystem. It’s not all sunshine and rainbows: if you want to organize your Node.js project, you’ll be responsible for more of the plumbing than you might in other ecosystems. Pros and Cons of Organizing Your TypeScript Project with Workspaces Workspaces meant solely for Node.js or the browser can target particular sets of language features, while portable shared code can use a lowest-common-denominator. Each workspace has its own TypeScript configuration, so they can have different ideas about the language target, whether JSX is available, etc.There’s no chance of inadvertently roping your database client into your frontend bundle. ![]() When you’re autocompleting an import, your editor will have a much easier job of searching the possibilities.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |