8fa7065cf1
This PR updates examples in `.md` files (both docs and blog posts) to use positional args. Nx 20 changes the position arg to be either `directory` for apps/libs or `path` for artifacts (e.g. components). So before you'd do this: ``` nx g app myapp --directory=apps/myapp nx g lib mylib --directory=libs/mylib nx g lib mylib --directory=libs/nested/mylib nx g lib @acme/foo --directory=libs/@acme/foo --importPath=@acme/foo nx g component foo --directory=libs/ui/src/foo --pascalCaseFiles ``` Will now be simplified to ``` nx g app apps/myapp nx g lib libs/mylib nx g lib libs/nested/mylib nx g lib libs/@acme/foo # name and import path are both "@acme/foo" nx g component libs/ui/src/foo/Foo ``` For cases where `name` and `importPath` need to be changed, you can always manually specify them. ``` nx g lib libs/nested/foo # name is foo nx g lib libs/nested/foo --name=nested-foo # specify name with prefix nx g lib libs/@acme/foo --name # use "foo" as name and don't match importPath nx g lib libs/@internal/foo --importPath=@acme/foo # different importPath from name <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
3.1 KiB
Generate Code
{% youtube src="https://youtu.be/hSM6MgWOYr8" title="Generate Code" /%}
Code generators are like automation scripts designed to streamline your workflow. Essentially, they are TypeScript functions that accept parameters and help boost your productivity by:
- Allowing you to scaffold new projects or augment existing projects with new features, like adding Storybook support
- Automating repetitive tasks in your development workflow
- Ensuring your code is consistent and follows best practices
Invoke Generators
Generators come as part of Nx plugins and can be invoked using the nx generate command (or nx g) using the following syntax: nx g <plugin-name>:<generator-name> [options].
Here's an example of generating a React library:
nx g @nx/react:lib packages/mylib
You can also specify just the generator name and Nx will prompt you to pick between the installed plugins that provide a generator with that name.
nx g lib packages/mylib
When running this command, you could be prompted to choose between the @nx/react and @nx/js plugins that each provide a library generator.
To see a list of available generators in a given plugin, run nx list <plugin-name>. As an example, to list all generators in the @nx/react plugin:
nx list @nx/react
Use Nx Console
If you prefer a visual interface, then Nx Console is an excellent alternative. It provides a way to visually find and run generators:
Nx Console is an IDE extension that can be installed here.
Build Your Own Generator
You can also customize existing generators by overwriting their behavior or create completely new ones. This is a powerful mechanism as it allows you to:
- automate your organization's specific processes and workflows
- standardize how and where projects are created in your workspace to make sure they reflect your organization's best practices and coding standards
- ensure that your codebase follows your organization's best practices and style guides
At their core, generators are just functions with a specific signature and input options that get invoked by Nx. Something like the following:
import { Tree, formatFiles, installPackagesTask } from '@nx/devkit';
export default async function (tree: Tree, schema: any) {
// Your implementation here
// ...
await formatFiles(tree);
return () => {
installPackagesTask(tree);
};
}
To help build generators, Nx provides the @nx/devkit package containing utilities and helpers. Learn more about creating your own generators on our docs page or watch the video below:
{% youtube src="https://www.youtube.com/embed/myqfGDWC2go" title="Scaffold new Pkgs in a PNPM Workspaces Monorepo" caption="Demonstrates how to use Nx generators in a PNPM workspace to automate the creation of libraries" /%}