|
1 | 1 | # 快速上手 |
| 2 | + |
| 3 | +## Setup Environment |
| 4 | + |
| 5 | +开始之前,你需要先安装 [Node.js](https://nodejs.org/) >= 16 版本,建议使用 Node.js LTS 版本。 |
| 6 | + |
| 7 | +使用以下命令检查当前的 Node.js 版本: |
| 8 | + |
| 9 | +```bash |
| 10 | +node -v |
| 11 | +``` |
| 12 | + |
| 13 | +如果当前环境没有安装Node.js,或者安装的版本太低,可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/nvm-sh/nvm) 或 [fnm](https:///github.com/Schniz/fnm)进行安装。 |
| 14 | + |
| 15 | +以下是如何通过 nvm 安装的示例: |
| 16 | + |
| 17 | +```bash |
| 18 | +# 安装 Node.js LTS |
| 19 | +nvm install --lts |
| 20 | +# 切换 Node.js LTS |
| 21 | +nvm use --lts |
| 22 | +``` |
| 23 | + |
| 24 | +## 创建一个 Rslib 项目 |
| 25 | + |
| 26 | +您可以使用 [`create-rslib`](https://www.npmjs.com/package/create-rslib) 创建一个新的 Rslib 项目。运行以下命令: |
| 27 | + |
| 28 | +import { PackageManagerTabs } from '@theme'; |
| 29 | + |
| 30 | +<PackageManagerTabs |
| 31 | + command={{ |
| 32 | + npm: 'npm create rslib@latest', |
| 33 | + yarn: 'yarn create rslib', |
| 34 | + pnpm: 'pnpm create rslib@latest', |
| 35 | + bun: 'bun create rslib@latest', |
| 36 | + }} |
| 37 | +/> |
| 38 | + |
| 39 | +然后按照提示完成操作。 |
| 40 | + |
| 41 | +### 模板 |
| 42 | + |
| 43 | +`create-rslib` 是一个快速创建 Rslib 项目的工具。创建项目时,你可以选择以下模板: |
| 44 | + |
| 45 | +| Template | Description | |
| 46 | +| ---------------------------- | ---------------------------- | |
| 47 | +| Node.js dual ESM/CJS package | Node.js dual ESM/CJS package | |
| 48 | +| Node.js pure ESM package | Node.js pure ESM package | |
| 49 | +| React | React component library | |
| 50 | + |
| 51 | +每个模板都支持 JavaScript 和 TypeScript,以及可选的开发工具、格式化程序和 linter。 |
| 52 | + |
| 53 | +:::info |
| 54 | +我们正在努力为更多框架提供模板 (比如 Vue). |
| 55 | +::: |
| 56 | + |
| 57 | +### 开发工具 |
| 58 | + |
| 59 | +`create-rslib` 可以帮助你设置一些常用的开发工具,包括 [Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)。您可以使用方向键和空格键进行选择。如果您不需要这些工具,只需按 Enter 跳过即可。 |
| 60 | + |
| 61 | +- Vitest适用于所有模板,它将根据模板的选择进行调整。 |
| 62 | +- Storybook 可用于 Web 目标模板 (React),它将根据模板的选择进行调整。 |
| 63 | + |
| 64 | +```text |
| 65 | +◆ Select development tools (Use <space> to select, <enter> to continue) |
| 66 | +│ ◻ Storybook |
| 67 | +│ ◻ Vitest |
| 68 | +└ |
| 69 | +``` |
| 70 | + |
| 71 | +### 可选工具 |
| 72 | + |
| 73 | +`create-rslib` 可以帮助您设置一些常用的格式化程序和 linter 工具,包括 [Biome](https://biomejs.dev/)、[ESLint](https://eslint.org/) 和 [prettier](https://prettier.io/)。您可以使用箭头键和空格键进行选择。如果您不需要这些工具,只需按 Enter 跳过即可。 |
| 74 | + |
| 75 | +```text |
| 76 | +◆ Select additional tools (Use <space> to select, <enter> to continue) |
| 77 | +│ ◻ Add Biome for code linting and formatting |
| 78 | +│ ◻ Add ESLint for code linting |
| 79 | +│ ◻ Add Prettier for code formatting |
| 80 | +└ |
| 81 | +``` |
| 82 | + |
| 83 | +:::tip |
| 84 | +Biome 提供与 ESLint 和 Prettier 类似的 linting 和格式化功能。如果您选择 Biome,通常也不需要选择 ESLint 或 Prettier。 |
| 85 | +::: |
| 86 | + |
| 87 | +### 当前目录 |
| 88 | + |
| 89 | +如果需要在当前目录下创建项目,可以将目标文件夹设置为 ".": |
| 90 | + |
| 91 | +```text |
| 92 | +◆ Create Rslib Project |
| 93 | +│ |
| 94 | +◇ Project name or path |
| 95 | +│ . |
| 96 | +│ |
| 97 | +◇ "." is not empty, please choose: |
| 98 | +│ Continue and override files |
| 99 | +``` |
| 100 | + |
| 101 | +### 快速生成 |
| 102 | + |
| 103 | +[create-rslib](https://www.npmjs.com/package/create-rslib) 提供了一些 CLI 标志。通过设置这些 CLI 标志,您可以跳过交互式选择步骤并使用一个命令创建项目。 |
| 104 | + |
| 105 | +例如,要使用一个命令在 "my-project" 目录中创建一个示例项目: |
| 106 | + |
| 107 | +```bash |
| 108 | +npx create-rslib --dir my-project --template example |
| 109 | + |
| 110 | +# Using abbreviations |
| 111 | +npx create-rslib -d my-project -t example |
| 112 | +``` |
| 113 | + |
| 114 | +All the CLI flags of `create-rslib`: |
| 115 | + |
| 116 | +```text |
| 117 | +Usage: create-rslib [options] |
| 118 | +
|
| 119 | +Options: |
| 120 | +
|
| 121 | + -h, --help display help for command |
| 122 | + -d, --dir create project in specified directory |
| 123 | + -t, --template specify the template to use |
| 124 | + --tools select additional tools (biome, eslint, prettier) |
| 125 | + --override override files in target directory |
| 126 | +``` |
| 127 | + |
| 128 | +## 迁移 |
| 129 | + |
| 130 | +如果您需要从现有项目迁移到 Rslib,可以参考以下指南: |
| 131 | + |
| 132 | +- [从 tsup 迁移](/guide/migration/tsup) |
| 133 | +- [从 Modern.js Module 迁移](/guide/migration/modernjs-module) |
| 134 | + |
0 commit comments