chore(rspack): configure correctly
This commit is contained in:
Colum Ferry
parent
1b819aa628
commit
9cbc1af014
100
docs/shared/packages/rspack/rspack-plugin.md
Normal file
100
docs/shared/packages/rspack/rspack-plugin.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: Overview of the Nx Rspack Plugin
|
||||
description: The Nx Plugin for Rspack contains executors, generators, and utilities for managing Rspack projects in an Nx Workspace.
|
||||
---
|
||||
|
||||
The Nx Plugin for Rspack contains executors, generators, and utilities for managing Rspack projects in an Nx Workspace.
|
||||
|
||||
## Setting Up @nx/rspack
|
||||
|
||||
### Installation
|
||||
|
||||
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
||||
Make sure to install the `@nx/rspack` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
||||
{% /callout %}
|
||||
|
||||
In any Nx workspace, you can install `@nx/rspack` by running the following command:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @nx/rspack
|
||||
```
|
||||
|
||||
This will install the correct version of `@nx/rspack`.
|
||||
|
||||
|
||||
### How @nx/rspack Infers Tasks
|
||||
|
||||
The `@nx/rspack` plugin will create a task for any project that has a Rspack configuration file present. Any of the following files will be recognized as a Rspack configuration file:
|
||||
|
||||
- `rspack.config.js`
|
||||
- `rspack.config.ts`
|
||||
- `rspack.config.mjs`
|
||||
- `rspack.config.mts`
|
||||
- `rspack.config.cjs`
|
||||
- `rspack.config.cts`
|
||||
|
||||
### View Inferred Tasks
|
||||
|
||||
To view inferred tasks for a project, open the [project details view](/concepts/inferred-tasks) in Nx Console or run `nx show project my-project --web` in the command line.
|
||||
|
||||
### @nx/rspack Configuration
|
||||
|
||||
The `@nx/rspack/plugin` is configured in the `plugins` array in `nx.json`.
|
||||
|
||||
```json {% fileName="nx.json" %}
|
||||
{
|
||||
"plugins": [
|
||||
{
|
||||
"plugin": "@nx/rspack/plugin",
|
||||
"options": {
|
||||
"buildTargetName": "build",
|
||||
"previewTargetName": "preview",
|
||||
"serveTargetName": "serve",
|
||||
"serveStaticTargetName": "serve-static"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Rspack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="Nx < 18" %}
|
||||
|
||||
Install the `@nx/rspack` package with your package manager.
|
||||
|
||||
```shell
|
||||
npm add -D @nx/rspack
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
|
||||
## Using @nx/rspack
|
||||
|
||||
### Generate a new project using Rspack
|
||||
|
||||
You can generate a [React](/nx-api/react) application or library that uses Rspack. The [`@nx/react:app`](/nx-api/react/generators/application) and [`@nx/react:lib`](/nx-api/react/generators/library) generators accept the `bundler` option, where you can pass `rspack`. This will generate a new application configured to use Rspack, and it will also install all the necessary dependencies, including the `@nx/rspack` plugin.
|
||||
|
||||
To generate a React application using Rspack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:app my-app --bundler=rspack
|
||||
```
|
||||
|
||||
To generate a React library using Rspack, run the following:
|
||||
|
||||
```bash
|
||||
nx g @nx/react:lib my-lib --bundler=rspack
|
||||
```
|
||||
|
||||
### Modify an existing React project to use Rspack
|
||||
|
||||
You can use the `@nx/rspack:rspack-project` generator to change your React to use Rspack. This generator will modify your project's configuration to use Rspack, and it will also install all the necessary dependencies, including the `@nx/rspack` plugin.
|
||||
|
||||
You can read more about this generator on the [`@nx/rspack:rspack-project`](/nx-api/rspack/generators/rspack-project) generator page.
|
||||
|
||||
@ -96,6 +96,10 @@
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-url": "^8.0.2",
|
||||
"@rspack/core": "^1.0.4",
|
||||
"@rspack/dev-server": "^1.0.4",
|
||||
"@rspack/plugin-minify": "^0.7.5",
|
||||
"@rspack/plugin-react-refresh": "^1.0.0",
|
||||
"@schematics/angular": "~18.2.0",
|
||||
"@storybook/addon-essentials": "^8.2.8",
|
||||
"@storybook/addon-interactions": "^8.2.8",
|
||||
|
||||
@ -1,3 +1,26 @@
|
||||
<p style="text-align: center;">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
|
||||
<img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
|
||||
</picture>
|
||||
</p>
|
||||
|
||||
{{links}}
|
||||
|
||||
<hr>
|
||||
|
||||
# Nx: Smart Monorepos · Fast CI
|
||||
|
||||
Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
|
||||
|
||||
This package is a [Rspack plugin for Nx](https://nx.dev/nx-api/rspack).
|
||||
|
||||
{{content}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
|
||||
|
||||
<hr>
|
||||
@ -43,39 +66,6 @@ First, install the plugin:
|
||||
npm install --save-dev @nx/rspack
|
||||
```
|
||||
|
||||
Then, run the `rspack-project` generator:
|
||||
|
||||
```bash
|
||||
npx nx g @nx/rspack:rspack-project --skipValidation
|
||||
```
|
||||
|
||||
**Note:** The `--skipValidation` option allows you to overwrite existing build targets.
|
||||
|
||||
## Workspace libraries
|
||||
|
||||
The `@nx/rspack` executor support importing workspace libs into the app.
|
||||
|
||||
```bash
|
||||
npx nx g @nx/react:lib mylib
|
||||
```
|
||||
|
||||
Import the new library in your app.
|
||||
|
||||
```typescript jsx
|
||||
// src/app/app.tsx
|
||||
import { Mylib } from '@rspack-demo/mylib';
|
||||
|
||||
// ...
|
||||
|
||||
export default function App() {
|
||||
return <MyLib />;
|
||||
}
|
||||
```
|
||||
|
||||
Now, run the dev server again to see the new library in action.
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
Then, r
|
||||
|
||||
**Note:** You must restart the server if you make any changes to your library.
|
||||
|
||||
@ -19,16 +19,16 @@
|
||||
"generators": "./generators.json",
|
||||
"executors": "./executors.json",
|
||||
"dependencies": {
|
||||
"@nx/js": "^19.5.7",
|
||||
"@nx/devkit": "^19.5.7",
|
||||
"@nx/js": "file:../js",
|
||||
"@nx/devkit": "file:../devkit",
|
||||
"@nx/eslint": "file:../eslint",
|
||||
"@phenomnomnominal/tsquery": "~5.0.1",
|
||||
"less-loader": "11.1.0",
|
||||
"license-webpack-plugin": "^4.0.2",
|
||||
"sass-loader": "^12.2.0",
|
||||
"stylus-loader": "^7.1.0",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"@nx/eslint": "^19.5.7",
|
||||
"@rspack/core": "^1.0.2",
|
||||
"@rspack/core": "^1.0.4",
|
||||
"@rspack/plugin-react-refresh": "^1.0.0",
|
||||
"@rspack/plugin-minify": "^0.7.5",
|
||||
"chalk": "~4.1.0"
|
||||
|
||||
@ -4,15 +4,23 @@
|
||||
"sourceRoot": "packages/rspack/src",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {
|
||||
"outputs": ["{workspaceRoot}/dist/packages/rspack"],
|
||||
"add-extra-dependencies": {
|
||||
"outputs": ["{workspaceRoot}/build/packages/rspack"],
|
||||
"command": "node ./scripts/add-dependency-to-build.js rspack @nrwl/rspack"
|
||||
},
|
||||
"build": {
|
||||
"executor": "nx:run-commands",
|
||||
"outputs": ["{workspaceRoot}/build/packages/rspack"],
|
||||
"options": {
|
||||
"command": "node ./scripts/copy-readme.js rspack"
|
||||
}
|
||||
},
|
||||
"build-base": {
|
||||
"dependsOn": ["^build-base"],
|
||||
"executor": "@nx/js:tsc",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/packages/rspack",
|
||||
"outputPath": "build/packages/rspack",
|
||||
"main": "packages/rspack/src/index.ts",
|
||||
"tsConfig": "packages/rspack/tsconfig.lib.json",
|
||||
"assets": [
|
||||
@ -36,26 +44,6 @@
|
||||
"LICENSE"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint",
|
||||
"outputs": ["{options.outputFile}"]
|
||||
},
|
||||
"test": {
|
||||
"executor": "@nx/jest:jest",
|
||||
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
|
||||
"options": {
|
||||
"jestConfig": "packages/rspack/jest.config.ts"
|
||||
}
|
||||
},
|
||||
"publish": {
|
||||
"executor": "nx:run-commands",
|
||||
"options": {
|
||||
"parallel": false,
|
||||
"commands": [
|
||||
"node tools/scripts/publish.mjs rspack {args.ver} {args.tag}"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"tags": []
|
||||
|
||||
@ -49,7 +49,10 @@ export const createNodesV2: CreateNodesV2<RspackPluginOptions> = [
|
||||
rspackConfigGlob,
|
||||
async (configFilePaths, options, context) => {
|
||||
const optionsHash = hashObject(options);
|
||||
const cachePath = join(workspaceDataDirectory, `vite-${optionsHash}.hash`);
|
||||
const cachePath = join(
|
||||
workspaceDataDirectory,
|
||||
`rspack-${optionsHash}.hash`
|
||||
);
|
||||
const targetsCache = readTargetsCache(cachePath);
|
||||
try {
|
||||
return await createNodesFromFiles(
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const rspackCoreVersion = '^1.0.2';
|
||||
export const rspackDevServerVersion = '^1.0.2';
|
||||
export const rspackCoreVersion = '^1.0.4';
|
||||
export const rspackDevServerVersion = '^1.0.4';
|
||||
|
||||
export const rspackPluginMinifyVersion = '^0.7.5';
|
||||
export const rspackPluginReactRefreshVersion = '^1.0.0';
|
||||
|
||||
685
pnpm-lock.yaml
generated
685
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user