-
Notifications
You must be signed in to change notification settings - Fork 281
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ad3c736
commit 372546d
Showing
11 changed files
with
811 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
# Build Modes | ||
|
||
## Bundless | ||
|
||
Bundless is a file-to-file build mode that does not process dependencies but instead compiles source files in parallel. Some popular community tools like [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html), [unbuild](https://github.com/unjs/unbuild), and the older Babel mode of father use this approach for building. | ||
|
||
In father 4, both ESModule and CommonJS outputs use the Bundless build mode. Let's take a look at how father works in this mode. | ||
|
||
Given the following source structure: | ||
|
||
```bash | ||
. | ||
└── src | ||
├── index.less | ||
├── index.tsx | ||
└── util.js | ||
``` | ||
|
||
With the following build configuration: | ||
|
||
```js | ||
export default { | ||
esm: { output: 'dist' }, | ||
// or | ||
cjs: { output: 'dist' }, | ||
}; | ||
``` | ||
|
||
father will generate the following output: | ||
|
||
```bash | ||
. | ||
└── dist | ||
├── index.d.ts | ||
├── index.js | ||
├── index.less | ||
└── util.js | ||
``` | ||
|
||
### How Bundless Works | ||
|
||
In Bundless mode, father processes the source files as follows: | ||
|
||
1. TypeScript files are compiled into JavaScript files, with corresponding `.d.ts` type definitions. | ||
2. JavaScript files are compiled into JavaScript with compatibility adjustments. | ||
3. Other files (such as stylesheets) are copied directly without modification. | ||
|
||
### When to Choose Bundless | ||
|
||
Bundless builds allow selective imports and provide better debugging capabilities. For most projects, Bundless is the preferred choice, which is why it is widely adopted in the community. | ||
|
||
For details on choosing between ESModule and CommonJS outputs, refer to the [ESModule vs CommonJS](./esm-cjs.md#how-to-choose) guide. | ||
|
||
--- | ||
|
||
## Bundle | ||
|
||
Bundle mode packages the source files by starting from an entry file, recursively resolving dependencies, and merging everything into a final build output. Tools like [Webpack](https://webpack.js.org), [Rollup](https://rollupjs.org/guide/en/), and the older Rollup mode of father follow this approach. | ||
|
||
In **father 4**, the Bundle build mode is only used for UMD outputs. Let's see how it works. | ||
|
||
Given the following source structure: | ||
|
||
```bash | ||
. | ||
└── src | ||
├── index.less | ||
└── index.tsx # Imports index.less | ||
``` | ||
|
||
With the following build configuration: | ||
|
||
```ts | ||
export default { | ||
umd: { output: 'dist' }, | ||
}; | ||
``` | ||
|
||
father will generate: | ||
|
||
```bash | ||
. | ||
└── dist | ||
├── index.min.js | ||
└── index.min.css | ||
``` | ||
|
||
### How Bundle Works | ||
|
||
In Bundle mode, father processes the source files by: | ||
|
||
- Bundling all dependencies into a single output file. | ||
- Generating minified JavaScript and CSS assets for optimized delivery. | ||
|
||
### When to Choose Bundle | ||
|
||
Bundle mode produces self-contained outputs. Since father only uses Bundle mode for UMD builds, choosing UMD automatically means using the Bundle mode. | ||
|
||
For guidance on when to choose UMD outputs, refer to the [UMD Build Guide](./umd.md#how-to-choose). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Development | ||
|
||
Once the build configuration is set up, you can start development. | ||
|
||
## Real-Time Compilation | ||
|
||
During development, real-time compilation is needed for debugging and verification: | ||
|
||
```bash | ||
# Start real-time compilation | ||
$ father dev | ||
# Skip the initial full build and only perform incremental builds on file changes | ||
$ father dev --incremental | ||
``` | ||
|
||
Whenever source files or configuration changes, the output will be incrementally compiled in real-time. | ||
|
||
## Debugging in a Project | ||
|
||
To test in another project, use `npm link` to link your project for debugging and verification: | ||
|
||
```bash | ||
$ cd test-project | ||
$ npm link /path/to/your-father-project . | ||
``` | ||
|
||
Once development and testing are complete, you can proceed with [publishing](./release.md) the NPM package. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
# Project Inspection | ||
|
||
Father's project inspection feature helps identify potential issues and provides improvement suggestions. Simply run: | ||
|
||
```bash | ||
$ father doctor | ||
``` | ||
|
||
The following rules are currently included. | ||
|
||
## PACK_FILES_MISSING | ||
|
||
- Severity: Error ❌ | ||
- Description: | ||
|
||
The `files` field is configured in `package.json`, but the build output directory is missing. This can cause the published NPM package to lack the necessary modules. | ||
|
||
## EFFECTS_IN_SIDE_EFFECTS | ||
|
||
- Severity: Error ❌ | ||
- Description: | ||
|
||
The `sideEffects` field in `package.json` is misconfigured. Common mistakes include: | ||
|
||
1. The build output includes style files, but `sideEffects` is set to `false`, causing styles to be lost after project compilation. | ||
2. Using Rollup.js-incompatible patterns like `*.css`. In Webpack, this matches all CSS files, but in Rollup.js, it only matches top-level CSS files. | ||
|
||
## PHANTOM_DEPS | ||
|
||
- Severity: Error ❌ | ||
- Description: | ||
|
||
A dependency is used in the source code but is not declared in `dependencies`. This results in a [phantom dependency](https://rushjs.io/pages/advanced/phantom_deps/)—it may not exist or could be the wrong version, leading to runtime failures. | ||
|
||
## CASE_SENSITIVE_PATHS | ||
|
||
- Severity: Error ❌ | ||
- Description: | ||
|
||
The file path casing in imports does not match the actual file names on disk. This issue is often unnoticed on case-insensitive file systems (e.g., Windows, macOS default settings), but it can cause module resolution failures on case-sensitive systems after publishing to NPM. | ||
|
||
## TSCONFIG_RISK | ||
|
||
- Severity: Error ❌ | ||
- Description: | ||
|
||
Checks for risks in `tsconfig.json`. Currently, the following risk is detected: | ||
|
||
1. If `compilerOptions.declaration` is enabled and `include` does not cover any Bundless build source files, `.d.ts` files may be missing in the output, triggering an error. | ||
|
||
## PREFER_PACK_FILES | ||
|
||
- Severity: Warning ⚠️ | ||
- Description: | ||
|
||
It is recommended to use the `files` field to specify which files to publish to NPM, reducing package size. | ||
|
||
## PREFER_NO_CSS_MODULES | ||
|
||
- Severity: Warning ⚠️ | ||
- Description: | ||
|
||
Avoid using CSS Modules, as they make it difficult for users to override styles and add extra compilation overhead. | ||
|
||
## PREFER_BABEL_RUNTIME | ||
|
||
- Severity: Warning ⚠️ | ||
- Description: | ||
|
||
Installing `@babel/runtime` in `dependencies` is recommended to reduce the build output size. | ||
|
||
> Note: This rule only applies when `transformer` is `babel` and `platform` is `browser`. | ||
## DUP_IN_PEER_DEPS | ||
|
||
- Severity: Warning ⚠️ | ||
- Description: | ||
|
||
The same dependency appears in both `peerDependencies` and `dependencies`. It is recommended to remove one based on the project's needs. | ||
|
||
If you have additional recommendations for NPM package development, feel free to comment on [this issue](https://github.com/umijs/father-next/issues/36). If approved, the rule will be added. | ||
|
||
## PREFER_PEER_DEPS | ||
|
||
- Severity: Warning ⚠️ | ||
- Description: | ||
|
||
Dependencies that could cause multiple instances (e.g., `react`, `antd`) should be placed in `peerDependencies` instead of `dependencies`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# Building ESModule and CommonJS Outputs | ||
|
||
> In the Father project, ESModule and CommonJS output builds follow a similar process, so they are covered together in this chapter. | ||
## How to Choose | ||
|
||
ESModule is the module standard for JavaScript, while CommonJS is used by Node.js. To determine which output format your project needs, consider the usage scenario: | ||
|
||
| Output Type / Runtime | Browser | Node.js | Both | | ||
| ---------------------- | ------- | -------- | ------- | | ||
| ESModule | ✅ Recommended | Not Recommended Yet | ✅ Recommended | | ||
| CommonJS | Not Necessary | ✅ Recommended | ✅ Recommended | | ||
|
||
Additional Notes | ||
|
||
1. The push for Pure ESM in the Node.js community still faces [some challenges](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). For broader compatibility, it is still recommended to produce CommonJS outputs for Node.js projects. In the future, Father will introduce a compatibility solution for generating both ESModule and CommonJS outputs. | ||
2. For browser environments, CommonJS output is unnecessary since all modern module bundlers can handle ESModules. With the rise of tools like Vite that support native ESModules, using ESModule is the best future-proof approach. | ||
3. Both means the output is intended for use in both browser and Node.js environments, such as `react-dom` and `umi`. | ||
|
||
## How to Build | ||
|
||
Use the `esm` and `cjs` configuration options, then run `father build` to generate ESModule and CommonJS outputs: | ||
|
||
```js | ||
// .fatherrc.js | ||
export default { | ||
// Default values for the `esm` config (only override if needed) | ||
esm: { | ||
input: 'src', // Default compilation directory | ||
platform: 'browser', // Outputs for browser environments by default | ||
transformer: 'babel', // Uses Babel for better compatibility | ||
}, | ||
// Default values for the `cjs` config (only override if needed) | ||
cjs: { | ||
input: 'src', // Default compilation directory | ||
platform: 'node', // Outputs for Node.js environments by default | ||
transformer: 'esbuild', // Uses esbuild for faster build speeds | ||
}, | ||
}; | ||
``` | ||
|
||
For more configuration options, refer to the [Configuration Guide](../config.md). | ||
|
||
In the Father project, both ESModule and CommonJS outputs are built using the Bundless mode. For details on Bundless mode, see [Build Modes - Bundless](./build-mode.md#bundless). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
The documentation has been moved to [./guide/index.md](./guide/index.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.