---
sidebar_position: 1
---

# 开发组件

本章将要介绍如何使用 Modern.js Module 开发组件项目。

## 初始化项目

1. 推荐使用 `@modern-js/create` 命令来初始化一个 npm 项目。

```text title="交互式问题"
npx @modern-js/create@latest components-project

? 请选择你想创建的工程类型：Npm 模块
? 请填写项目名称：components-demo
? 请选择开发语言：TS
? 请选择包管理工具：pnpm
```

2. 初始化的目录结构如下：

```bash
.
├── README.md
├── node_modules/
├── dist/
├── modern.config.ts
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── index.ts
│   └── modern-app-env.d.ts
└── tsconfig.json
```

3. 最后修改 `./src/index.ts` 文件后缀和内容如下，就完成了组件项目的初始化。

```tsx title="./src/index.tsx"
export default () => {
  return <div>hello world</div>;
};
```

## 使用 Storybook 调试代码

请参考 [「使用 Storybook」](/guide/basic/using-storybook.html) 来使用 Storybook 调试代码。

## 开发样式

接下来我们可以给组件添加样式。

目前支持开发样式的能力有：

- CSS/PostCSS
- Less
- Scss/Sass
- Tailwind CSS
- CSS Modules

### CSS/PostCSS

Modern.js Module 支持 PostCSS，并且内置了以下 PostCSS 插件：

- [flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)
- [custom-properties](https://github.com/postcss/postcss-custom-properties)
- [initial](https://github.com/maximkoretskiy/postcss-initial)
- [page-break](https://github.com/shrpne/postcss-page-break)
- [font-variant](https://github.com/postcss/postcss-font-variant)
- [media-minmax](https://github.com/postcss/postcss-media-minmax)
- [nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme)

因此我们可以在项目中创建 `.css` 文件，并且可以直接在 css 文件中使用这些插件提供的语法支持和能力。

- 源代码：

```less title="./src/index.css"
a,
b {
  color: red;

  /* "&" comes first */
  & c,
  & d {
    color: white;
  }

  /* "&" comes later, requiring "@nest" */
  @nest e & {
    color: yellow;
  }
}
```

- CSS 产物：

```css title="./dist/es/index.css"
a,
b {
  color: red;
}
a c,
b c,
a d,
b d {
  color: white;
}
e a,
e b {
  color: yellow;
}
```

### Less

Modern.js Module 支持使用 Less 开发样式。

> 目前内置的 Less 版本为 v4.1.3

- 源代码：

```less title="./src/common.less"
@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg;
  color: if(@bg-light, black, white);
}
```

- Less 产物：

```css title="./dist/es/common.css"
div {
  background: black;
  color: white;
}
```

### Sass/Scss

Modern.js Module 支持使用 Scss/Sass 开发样式。

> 目前内置的 Sass 版本为 v1.54.4

- 源代码：

```scss title="./src/common.sass"
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

- Sass 产物：

```css title="./dist/es/common.css"
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
```

### Tailwind CSS

请参考 [「使用 Tailwind CSS」](/guide/best-practices/use-tailwindcss.html) 来了解相关用法。

### CSS Modules

Modern.js Module 支持使用 CSS Module 开发样式。默认情况下会将以下文件识别为 CSS Module 文件：

- `.module.css`
- `.module.less`
- `.module.scss`
- `.module.sass`

如果需要对 CSS Modules 进行配置，可以查看以下 API：

- [style.autoModules](/api/config/build-config#styleautomodules)
- [style.modules](/api/config/build-config#stylemodules)

下面是一个代码示例：

```tsx title="./src/index.tsx"
import style from './index.module.css';

export default () => {
  return <div className={style.btn}>hello world</div>;
};
```

```css title="./src/index.module.css"
.btn {
  color: blue;
}
```

## 配置构建产物

根据组件项目使用的多数场景，**推荐使用 `npm-component` 构建预设**。该预设得到的产物目录结构为：

```bash
.
├── dist
│   ├── es
│   ├── lib
│   └── types
```

- `./dist/es`: 包含了支持 es6 语法的 ES modules 格式的 bundleless 产物。
- `./dist/lib`: 包含了支持 es6 语法的 CommonJS 格式的 bundleless 产物。
- `./dist/types`: 包含了类型文件。

如果对使用语法支持有要求，可以手动配置 [`buildPreset`](/api/config/build-preset)，并且支持在 `npm-component` 基础上增加后缀的方式修改支持的语法：

```tsx
export default defineConfig({
  buildPreset: 'npm-component-es2019',
});
```

如果对构建产物目录结构有特殊需求，则可以使用 [`buildConfig` API](/api/config/build-config)，可以通过以下文档来了解使用方式：

- [修改输出产物](/guide/basic/modify-output-product#构建配置对象)
- [深入理解构建](/guide/advance/in-depth-about-build)

## 发布组件

推荐使用 Modern.js Module 提供的版本发布功能，可以参考 [「版本管理与发布」](/guide/basic/publish-your-project)。