Skip to content

Commit

Permalink
docs: english translation
Browse files Browse the repository at this point in the history
  • Loading branch information
ramu-narasinga committed Feb 18, 2025
1 parent ad3c736 commit 372546d
Show file tree
Hide file tree
Showing 11 changed files with 811 additions and 19 deletions.
99 changes: 99 additions & 0 deletions docs/guide/build-mode.en-US.md
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).
27 changes: 27 additions & 0 deletions docs/guide/dev.en-US.md
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.
88 changes: 88 additions & 0 deletions docs/guide/doctor.en-US.md
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`.
44 changes: 44 additions & 0 deletions docs/guide/esm-cjs.en-US.md
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).
1 change: 1 addition & 0 deletions docs/guide/guide.en-US.md
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).
38 changes: 19 additions & 19 deletions docs/guide/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

## Introduction

**Father** is an NPM package development tool that helps developers efficiently and reliably develop NPM packages, generate build artifacts, and publish them. It offers the following key features:
Father is an NPM package development tool that helps developers efficiently and reliably develop NPM packages, generate build artifacts, and publish them. It offers the following key features:

- ⚔️ **Dual-mode Build**: Supports both **Bundless** and **Bundle** build modes—ESModule and CommonJS outputs use Bundless mode, while UMD outputs use Bundle mode.
- 🎛 **Multiple Build Engines**: Bundle mode uses **Webpack** as the build engine, while Bundless mode supports **esbuild, Babel, and SWC**, allowing flexible configuration switching.
- ⚔️ **Dual-mode Build**: Supports both Bundless and Bundle build modes—ESModule and CommonJS outputs use Bundless mode, while UMD outputs use Bundle mode.
- 🎛 **Multiple Build Engines**: Bundle mode uses Webpack as the build engine, while Bundless mode supports esbuild, Babel, and SWC, allowing flexible configuration switching.
- 🔖 **Type Generation**: Supports generating `.d.ts` type definitions for TypeScript modules, whether for source code builds or dependency pre-bundling.
- 🚀 **Persistent Caching**: All output types support persistent caching, enabling faster incremental builds.
- 🩺 **Project Inspection**: Checks for common pitfalls in NPM package development to ensure more stable releases. -
Expand All @@ -14,17 +14,17 @@

---

#### **Compatibility**
#### Compatibility

- **Father** requires **Node.js v14 or later** to run. Please ensure that you have Node.js **v14+** installed before using it.
- The **default Node.js output** from Father is compatible with **Node.js v14+**.
- **Browser output** is compatible with **ES5 (IE11)** by default.
- Father requires Node.js v14 or later to run. Please ensure that you have Node.js v14+ installed before using it.
- The default Node.js output from Father is compatible with Node.js v14+.
- Browser output is compatible with ES5 (IE11) by default.

---

#### **Quick Start**
#### Quick Start

Use `create-father` to quickly create a new **Father** project:
Use `create-father` to quickly create a new Father project:

```sh
npx create-father my-father-project
Expand All @@ -38,17 +38,17 @@ To build the project, run:
npx father build
```

After the build completes, check the `dist` folder to see the generated output. **Congratulations!** 🎉 You've successfully built your first Father project!
After the build completes, check the `dist` folder to see the generated output. Congratulations! 🎉 You've successfully built your first Father project!

---

#### **Next Steps**
#### Next Steps

Explore more features of **Father**:
- **Bundless vs. Bundle build modes**
- **Building ESModule & CommonJS outputs**
- **Building UMD outputs**
- **Dependency pre-bundling**
- **Running project inspections**
- **Development guide**
- **Publishing guide**
Explore more features of Father:
- Bundless vs. Bundle build modes
- Building ESModule & CommonJS outputs
- Building UMD outputs
- Dependency pre-bundling
- Running project inspections
- Development guide
- Publishing guide
Loading

0 comments on commit 372546d

Please sign in to comment.