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 #
4.5 KiB
| title | description |
|---|---|
| JS library generator examples | This page contains examples for the @nx/js:lib generator. |
The @nx/js:lib generator will generate a library for you, and it will configure it according to the options you provide.
npx nx g @nx/js:lib libs/mylib
By default, the library that is generated when you use this executor without passing any options, like the example above, will be a buildable library, using the @nx/js:tsc executor as a builder.
You may configure the tools you want to use to build your library, or bundle it too, by passing the --bundler flag. The --bundler flag controls the compiler and/or the bundler that will be used to build your library. If you choose tsc or swc, the result will be a buildable library using either tsc or swc as the compiler. If you choose rollup or vite, the result will be a buildable library using rollup or vite as the bundler. In the case of rollup, it will default to the tsc compiler. If you choose esbuild, you may use the esbuildOptions property in your project.json under the build target options to specify whether you wish to bundle your library or not.
Examples
{% tabs %}
{% tab label="Buildable with default compiler (tsc)" %}
Generate a buildable library using the @nx/js:tsc executor. This uses tsc as the compiler.
npx nx g @nx/js:lib libs/mylib
{% /tab %}
{% tab label="Buildable with SWC compiler" %}
Generate a buildable library using SWC as the compiler. This will use the @nx/js:swc executor.
npx nx g @nx/js:lib libs/mylib --bundler=swc
{% /tab %}
{% tab label="Buildable with tsc" %}
Generate a buildable library using tsc as the compiler. This will use the @nx/js:tsc executor.
npx nx g @nx/js:lib libs/mylib --bundler=tsc
{% /tab %}
{% tab label="Buildable, with Rollup as a bundler" %}
Generate a buildable library using Rollup as the bundler. This will use the @nx/rollup:rollup executor. It will also use SWC as the compiler.
npx nx g @nx/js:lib libs/mylib --bundler=rollup
If you do not want to use swc as the compiler, and want to use the default babel compiler, you can do so in your project.json under the build target options, using the compiler property:
"build": {
"executor": "@nx/rollup:rollup",
"options": {
//...
"compiler": "babel"
}
}
{% /tab %}
{% tab label="Buildable, with Vite as a bundler" %}
Generate a buildable library using Vite as the bundler. This will use the @nx/vite:build executor.
npx nx g @nx/js:lib libs/mylib --bundler=vite
{% /tab %}
{% tab label="Using ESBuild" %}
Generate a buildable library using ESBuild as the bundler. This will use the @nx/esbuild:esbuild executor.
npx nx g @nx/js:lib libs/mylib --bundler=esbuild
If you want to specify whether you want to bundle your library or not, you can do so in your project.json under the build target options, using the esbuildOptions property:
"build": {
"executor": "@nx/esbuild:esbuild",
"options": {
//...
"esbuildOptions": {
"bundle": true
}
}
}
{% /tab %}
{% tab label="Minimal publishing target" %}
Generate a publishable library with a minimal publishing target. The result will be a buildable library using the @nx/js:tsc executor, using tsc as the compiler. You can change the compiler or the bundler by passing the --bundler flag.
npx nx g lib libs/mylib --publishable
{% /tab %}
{% tab label="Using directory flag" %}
Generate a library named mylib and put it under a directory named myapp (libs/myapp/mylib)
{% callout type="note" title="Directory Flag Behavior Changes" %}
The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, use --directory=myapp. See the as-provided vs. derived documentation for more details.
{% /callout %}
npx nx g lib libs/nested/mylib
{% /tab %}
{% tab label="Non-buildable library" %}
Generate a non-buildable library.
npx nx g @nx/js:lib libs/mylib --bundler=none
{% /tab %}
{% /tabs %}