构建npm包

在使用dumi构建npm包之前，我们先来了解一下什么是dumi？官方解释如下：

dumi，中文发音嘟米，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

dumi特性

🙊 目前只支持react，不支持 vue
📦 开箱即用，将注意力集中在组件开发和文档编写上
📋 丰富的 Markdown 扩展，不止于渲染组件 demo
🏷 基于 TypeScript 类型定义，自动生成组件 API
🎨 主题轻松自定义，还可创建自己的 Markdown 组件
📱 支持移动端组件库研发，内置移动端高清渲染方案
📡 一行命令将组件资产数据化，与下游生产力工具串联

快速上手

开始之前确保有node，并且版本是 10.13 或以上。

首先我们在自己的项目中找个空目录，然后再使用脚手架。dumi为我们提供了两个脚手架doc | site，dumi默认设置mode为文档模式，配置为site时可无缝切换为站点模式。两种模式的效果如下，文档模式：站点模式：

我将以站点模式为例，进行npm包的构建，其他模式可进入官网dumi查看。

脚手架初始化

$ npx @umijs/create-dumi-lib --site
# or
$ yarn create @umijs/dumi-lib --site

开始开发

$ npm i
$ npm start
# or
$ yarn
$ yarn start

或者也可以执行 npx dumi dev 即可开始调试组件或编写文档。一顿简易操作后我们得到如下目录：然后我们可以在docs下的index.md里更改首页的内容，并且在src下可以创建自己的 Markdown 组件了。dumi还自带许多配置项，可以根据自己的需求在项目根目录创建的 .umirc.ts 或 config/config.ts 文件下进行配置，传送门。

构建及部署

执行npm run docs:build(组件开发脚手架) / npm run build（静态站点脚手架), 或 npx dumi build 即可对我们的文档站点做构建，构建产物输出目录我们可以在.umirc.ts文件里自定义配置outputPath，一般默认会输出到 dist 目录下。

在开发完自己的组件后，我们需要发布到npm，在发布前，我们需要对自己的组件库做些准备。

npm发布

编写package.json

初始化生成的文件中有几个字段需要我们更改：

name 项目包名。发布到npm时的名字，不能和已有的npm库重复，取名前可以自己去npm上搜索查看；
version版本号。每次更新npm包时，需要修改一个更高的版本号才能成功发布到npm；
description 描述。npm包描述说明；
main 入口文件路径。在你通过import或require引用该npm包时就是引入的该路径的文件；
files配置要上传npm的文件白名单。假如我不想将src里的源码发布到npm，我们就可以只配置dist文件夹，这样dist文件夹会上传npm，而src文件夹就不会上传，我们只需将src源码上传项目到git远程仓库就可以了；
author编写作者名字。
license开源协议文件。这里使用MIT协议类型，在项目根目录新建LICENSE.txt文件，填入以下内容：

MIT License

Copyright (c) 2022 Your Name

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

repository用来关联npm包和github地址。关联并发布npm后，在npm官网的该npm包页面右边会显示有github链接，点击可以跳转到github项目地址。

最后配置完成后如下：

{
  "name": "test-npm",
  "version": "1.0.0",
  "description": "前端组件库",
  "main": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "author": "user",
  "keywords": ["dumi", "typescript", "js"],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git://github.com/XXXXX/npm.git"
  },  
}

发布npm

注册登录

如果你已经有账号，可以忽略这一步；如果没有则先申请一个npm账号。申请完成后，在终端输入npm login登录，只需登录一次之后就不用登录了。在这里，npm login登录时可能会出现报错：“Unexpected token ＜ in JSON at position 0 while parsing near ‘＜!DOCTYPE html＞”，此错误意味着中间有一个代理，它拒绝你访问Internet，需要设置注册表：npm set registry https://registry.npmjs.org/

调试

正常我们要通过npm link进行调试，但因为我们使用的脚手架自带预览效果与之类似，所以我们可以跳过这个步骤。

发布

在终端输入npm publish命令，运行完成后过一会儿就能在官网搜索到你发布的npm包辣。在这个过程中可能出现报错 This package has been marked as private，因为这是一个私有项目，所以要更改package.json 文件配置"private": false就可以解决了。

使用发布的包

发布之后就可以npm i name --save在自己的项目中使用辣～

使用dumi构建npm包以及npm发布全流程