前言

學會發包可以避免我們在項目開發中重復造輪子的現象；當我們開發了通用的組件或者工具庫后可以將其發布到npm上，這樣在我們后續有同樣需求的時候就可以直接下載下來用了，是不是灰常的的靈性。不知道怎么發包的小伙伴可以跟著我從0到1的發布一個包（發包流程跟技術框架和打包工具沒有必然的聯系，可根據自身情況進行技術選型）

技術棧

• Vite
• React
• TypeScript
• Less
• Npm

操作流程

1. 準備項目工程并編寫組件

創建一個基礎模板（這里我通過vite創建一個react模板，node版本要求：14.18+，16+ ）

npm: npm create vite@latestoryarn: yarn create vite

然后根據命令行提示輸入項目名稱、選擇框架、選擇語言
我這邊選擇的是：React和TypeScript

項目創建后先安裝依賴

npm: npm install npm: npm install less less-loader -Doryarn: yarn yarn: yarn add less less-loader -D

改造模板（可根據個人習慣改造）

• 刪除樣式文件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 | ReactNodeprimaryColor?: stringonClick?: () => 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.MODEif (mode !== 'production') {// <App /> 組件里面可以放我們的組件測試代碼 所以開發環境這一步是必要的// 但是生產環境渲染節點會顯得多余 所以生產環境不需要這一步（主要是react18+ createRoot不能使用多次，否則開發者使用該包時控制臺會報警告）ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />) }

App.tsx 改造后

import { XButton } from "./components"function App() {return (<div className="App"><XButton>測試</XButton></div>) }export default App

獻上我的組件 components/XButton.tsx

import React from "react"; import { XButtonType } from "../..";// 組件很簡單 就是一個可以動態改變顏色和內容的按鈕 export default function XButton(props: XButtonType) {const { children, primaryColor = "#8f0ce7", onClick } = props;const style: React.CSSProperties = {"--x-primary-color": primaryColor,} as React.CSSProperties;return (<button className="x-button" style={style} onClick={onClick}>{children}</button>); }

** 注意點：使用index.d.ts文件需要在tsconfig.json文件中配置一下

"include": ["src"], // 配置后 "include": ["src", "index.d.ts"],

2. 配置vite.config.ts

下載path

npm: npm install path -Doryarn: yarn add path -D

配置vite.config.ts

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react'// https://vitejs.dev/config/ export default defineConfig({plugins: [react()]build: {lib: {// 打包入口entry: resolve('src', 'main.tsx'),name: 'x-button',// 文件名稱fileName: 'index',},rollupOptions: {// 確保外部化處理那些你不想打包進庫的依賴external: ['react', 'react-dom'],output: {// 在 UMD 構建模式下為這些外部化的依賴提供一個全局變量globals: {react: 'React',},},},// 打包輸出目錄outDir: 'lib/dist', }, })

執行打包命令

npm: npm run buildor yarn: yarn build

根目錄會生成一個lib目錄，這時打包工作已經完成，不過還有幾個坑我們后面來填

3. 配置npm

終端執行命令

npm init

根據命令行提示輸入對應信息

• package name: 包名，發到npm上的名稱
• version: 版本號
• description：項目描述（選填）
• entry point： 入口文件路徑(路徑就是我們打包后的目錄文件 ./lib/dist/index.js)
• git repository：倉庫地址（選填）
• keywords： 關鍵詞（選填）
• author：作者信息（選填）
• license：開源協議（默認ISC，關于開源協議可以自行了解）

修改package.json部分配置

{"name": "xz-test-button","private": false, // true改為false"version": "0.0.1","type": "module","scripts": {"dev": "vite","build": "tsc && vite build","preview": "vite preview"},"dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"},"devDependencies": {"@types/react": "^18.0.22","@types/react-dom": "^18.0.7","@vitejs/plugin-react": "^2.2.0","less": "^4.1.3","less-loader": "^11.1.0","path": "^0.12.7","typescript": "^4.6.4","vite": "^3.2.2"},"types": "./index.d.ts","description": "按鈕","main": "./lib/dist/index.js",// 新增 ----------->----------->"module": "./lib/dist/index.js","exports": {".": {"import": "./lib/dist/index.js","require": "./lib/dist/index.umd.cjs"}},"files": ["lib","index.d.ts"],// <--------------<------------"author": "","license": "ISC" }

經過上面操作我們的準備工作已經完成

4. 發布

沒有npm賬號的可以先去npm官網注冊一個或者通過npm adduser命令注冊

完成上面步驟后我們先登錄npm賬號，執行npm login命令進行登錄，根據命令行提示輸入用戶名、密碼、郵箱、郵箱驗證碼

登錄完成后我們執行npm publish命令進行發布

• 這里發包可能會出現404或者403，這時先確保是否登錄成功，然后再確認當前項目名稱是否和npm已有的包沖突，更換名字后再進行嘗試
• 每次發包需要保證當前版本號在此之前沒有被使用（發布）過

當終端沒有報錯且最后一行顯示包名和版本號就表示發布成功

• 如 xz-test-button@0.0.1
• 可以去npm官網去搜索自己的包名或者在自己的包列表查看

完成以上操作后一個npm包就算是發布成功了，但是還沒完…

5. 使用

在另一個項目中npm install 包名或者yarn add 包名

使用方式

import { XButton } from "xz-test-button";function App() {return (<div className="App"><XButton>測試</XButton></div>); }export default App;

使用中的問題：

• 樣式沒加載
  
• 使用問題：類型問題
  

6. 填坑

雖然包發布成功了，但是前面說過還有一些坑需要填，這些坑剛剛也看見了，都是在使用的時候出現的

樣式問題

• 將包下載到另一個項目使用會發現組件結構是存在的就是沒有樣式，這是因為vite打包的時候雖然將樣式打包到輸出目錄了，但是在js文件中沒有引用css文件；
• 解決方案：
  • 可以手動將style.css引入到index.js中（每次打包都需要引一次，比較麻煩，不推薦）
  • 通過vite-plugin-libcss插件自動引入（推薦），先下載依賴：

npm: npm install vite-plugin-libcss -Dor yarn: yarn add vite-plugin-libcss -D

改造vite.config.ts文件

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { resolve } from 'path' import libCss from 'vite-plugin-libcss';// https://vitejs.dev/config/ export default defineConfig({plugins: [react(), libCss()],... 不變 ... })

問題：模塊““xxx””沒有導出的成員“x”或者找不到“xxx”的類型聲明文件

• 因為項目是TypeScript開發的所以我們需要模塊導出，通過改造index.d.ts文件來解決

import React, { ReactNode } from "react"export declare type XButtonType = {children: string | ReactNodeprimaryColor?: stringonClick?: () => void }declare module 'xz-test-button' {export function XButton(props: XButtonType): JSX.Element }

然后重新打包即可

7. 更新包

首先更新包版本npm version patch（因為我們是修復bug，所以我們只需更新修復版本號）

再次執行發包命令npm publish

最后在使用這個包的項目中重新下載一次這個包就不會出現類型問題和樣式問題了

總結

通過上面一套流程走下來會發現其實發包很簡單，也就是執行一些命令，修改一些配置就能完成；可能難點就是針對一些細節問題，比如發包404、403、401、組件樣式問題、TS類型問題。能處理好這些細節就基本沒什么問題了

總結

以上是生活随笔為你收集整理的还不会发包？30S教会你的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。