还不会发包？30S教会你

前言

学会发包可以避免我们在项目开发中重复造轮子的现象；当我们开发了通用的组件或者工具库后可以将其发布到npm上，这样在我们后续有同样需求的时候就可以直接下载下来用了，是不是灰常的的灵性。不知道怎么发包的小伙伴可以跟着我从0到1的发布一个包（发包流程跟技术框架和打包工具没有必然的联系，可根据自身情况进行技术选型）

技术栈

• Vite
• React
• TypeScript
• Less
• Npm

操作流程

1. 准备项目工程并编写组件

1. 创建一个基础模板（这里我通过vite创建一个react模板，node版本要求：14.18+，16+ ）

npm: npm create vite@latest

or

yarn: yarn create vite

然后根据命令行提示输入项目名称、选择框架、选择语言
我这边选择的是：React和TypeScript

2. 项目创建后先安装依赖

npm: npm install
npm: npm install less less-loader -D

or

yarn: yarn
yarn: yarn add less less-loader -D

3. 改造模板（可根据个人习惯改造）

• 删除样式文件App.css和index.css
• 在assets目录创建styles目录用于存放样式
• 在/assets/styles新建index.less文件，所有样式都统一从这里导出
• 在src目录下新建components目录用于编写组件
• 在/src/components目录下新建index.ts文件，所有组件都统一从这里导出
• 跟目录下新建index.d.ts类型文件
• 改造main.tsx
• 改造App.tsx

类型文件index.d.ts

import {
    ReactNode } from "react"

export declare type XButtonType = {
   
    children: string | ReactNode
    primaryColor?: string
    onClick?: () => void
}

main.tsx 改造后

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 引入项目所需样式
import './assets/styles/index.less'
// 导出组件
export * from './components/index'

const mode = import.meta.env.MODE

if (mode !== 'production') {
   
  // <App /> 组件里面可以放我们的组件测试代码 所以开发环境这一步是必要的
  // 但是生产环境渲染节点会显得多余 所以生产环境不需要这一步（主要是react18+ createRoot不能使用多次，否则开发者使用该包时控制台会报警告）
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <App />
  )
}

App.tsx 改造后

import {
    XButton } from "./components