close
logo
Rslib
指南
配置
博客
English
简体中文
指南
配置
博客
English
简体中文
logo
Rslib

开始

介绍
快速上手
名词解释
NPM 包

解决方案

Node.js
React
Vue

基础

命令行工具
配置 Rslib
使用 TypeScript
产物输出格式
产物结构
升级 Rslib

进阶

处理三方依赖
产物兼容性
类型生成
引用静态资源
引用 SVGR
引用 JSON 文件
模块联邦
使用 Storybook

迁移

Modern.js Module
tsup

常见问题

功能类问题
📝 在 GitHub 上编辑此页
上一页介绍
下一页名词解释

#快速上手

#环境准备

开始之前,需要先安装 Node.js >= 18.12.0 版本,推荐使用 Node.js LTS 版本。

通过以下命令检查当前的 Node.js 版本:

node -v

如果你的环境中尚未安装 Node.js,或是版本太低,可以通过 nvm 或 fnm 安装。

下面是通过 nvm 安装的例子:

# 安装 Node.js LTS
nvm install --lts
# 切换 Node.js LTS
nvm use --lts

#创建 Rslib 项目

你可以使用 create-rslib 创建一个 Rslib 项目。运行以下命令:

npm
yarn
pnpm
bun
npm create rslib@latest

然后按照提示操作即可。

#模板

create-rslib 是一个快速创建 Rslib 项目的工具。创建项目时,你可以选择以下模板:

TemplateDescription
Node.js dual ESM/CJS packageNode.js dual ESM/CJS package
Node.js pure ESM packageNode.js pure ESM package
ReactReact component library
VueVue component library

每个模板都支持 JavaScript 和 TypeScript,以及可选的开发工具、格式化程序和 linter。

#开发工具

create-rslib 可以帮助你设置一些常用的开发工具,包括 Rstest、Vitest、Storybook。你可以使用方向键和空格键进行选择。如果你不需要这些工具,只需按 Enter 跳过即可。

  • Rstest / Vitest 适用于所有模板,它将根据模板的选择进行调整。
  • Storybook 可用于 Web 目标模板 (React、Vue),它将根据模板的选择进行调整。
◆  Select development tools (Use <space> to select, <enter> to continue)
│  ◻ Storybook
│  ◻ Rstest
│  ◻ Vitest
└

#可选工具

create-rslib 可以帮助你设置一些常用的代码检查和格式化工具,包括 Biome、ESLint 和 prettier。你可以使用箭头键和空格键进行选择。如果你不需要这些工具,按 Enter 跳过即可。

◆  Select additional tools (Use <space> to select, <enter> to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
└
TIP

Biome 提供与 ESLint 和 Prettier 类似的代码检查和格式化功能。如果你选择 Biome,通常也不需要选择 ESLint 或 Prettier。

#当前目录

如果需要在当前目录下创建项目,可以将目标文件夹设置为 .:

◆  Create Rslib Project
│
◇  Project name or path
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files

#快速生成

create-rslib 提供了一些 CLI 选项。通过设置这些 CLI 选项,你可以跳过交互式的选择步骤,一键创建项目。

比如,一键创建 example 模版项目到 my-project:

npx create-rslib --dir my-project --template example

# 使用缩写
npx create-rslib -d my-project -t example

create-rslib 的完整的 CLI 选项如下:

Usage: create-rslib [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  --tools          select additional tools (biome, eslint, prettier)
  --override       override files in target directory

#从现有项目迁移

如果你需要从一个现有项目迁移迁移到 Rslib,可以参考以下指南:

  • 从 tsup 迁移
  • 从 Modern.js Module 迁移

#其他项目

对于其他类型的项目,你可以手动安装 @rslib/core 包:

npm
yarn
pnpm
bun
npm add @rslib/core -D

然后参考指南和文档,按需启用各个功能:

  • 参考 命令行工具 来了解可用的 CLI 命令。
  • 参考 配置 Rslib 进行配置。