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. By using the use Nx in the lerna.json, now we can just run yarn test, for instance, to use the test script, which is already there.Metro has three separate stages in its bundling process, documented here. The main advantage here is that we don't even have to change now this grids, which we have in our package.json. You can just go into the lerna.json file and use Nx and set that to true. Now, if you have Lerna 5.1 installed in your workspace, then there is an option to very easily also opt-in to Nx. Now, we mentioned initially that this repository specifically uses Lerna. We can immediately see that this workspace consists of React application of a React app, route library, as well as a shared theme library. If we open up the visual exploration here, we can enable our projects. We can visually explore how the workspace looks like. Now, apart from the task scheduling, you also now get the Nx graph capabilities. Now, you can also see that if I rerun it, it has also the caching in place. For instance, we could just do Nx affected:test, and that would automatically now run with the dynamic terminal of Nx, all the packages that are in there and all the tests. Nx will automatically detect the package JSONs that are in this repository, and be able to identify which packages are in there and go ahead and execute them. You might probably have it at some point, just to specify some more customizations. There's also the nx-cloud package because we opted into that, but that is completely optional. Now that Nx is installed, let's have a look quickly at the changes that have been applied. We also made it a bit more simple by just using the add-nx-to-monorepo command. All we have to do is add Nx here, add it as a development dependency, and also specify the -W, meaning that we install it at the very root package JSON of this monorepo. Adding Nx is as simple as installing the Nx package. We can use something like yarn test, which will again invoke Lerna and execute the testing for the three packages that live in this Workspace. It happens to use Lerna behind the scenes to run the build for the package. Instructor: For the purpose of this demonstration, I just downloaded an arbitrary repository from GitHub, which uses Yarn Workspaces here, where we can for instance run yarn build.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |