利用unbuild 打包组件库

安装 unbuild

npm install unbuild -D

修改 package.json

• 增加了 build 和 stub 命令

• main、module、types 指向 dist 目录

{
  "name": "demo2",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "unbuild",
    "stub": " unbuild --stub"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.26.0",
  "devDependencies": {
    "unbuild": "^3.6.1"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts"
}

服务架构

• 架构目录

├── build.config.ts // 打包配置文件
├── package.json // npm 包文件
├── src // 开发源码文件
│   └── index.ts // 入口主文件

build.config.ts

import { defineBuildConfig } from "unbuild";

export default defineBuildConfig({
  // 忽略警告
  failOnWarn: false,
  // 构建的入口文件
  entries: ["src/index.ts"],
  // 是否生成声明文件
  declaration: true,
  // 是否清理输出目录
  clean: true,
  // 打包配置
  rollup: {
    // 打包格式 两种都打 mjs,cts
    // mjs 主要是 引入的时候 是import { xxx } from 'xxx' 格式
    // cjs 主要是 引入的时候 是const { xxx } = require('xxx') 格式
    emitCJS: true,
  },
});

src/index.ts

export default {
  a: 1,
  b: 2,
  c: 7,
  add() {
    return this.a + this.b + this.c - 10;
  },
};

执行打包命令

npm run build

• 这个命令和打包什么的无关.仅仅是监听

npm run stub

测试

新建一个文件夹

• 执行命令

pnpm init

安装包命令

 pnpm add file: ../demo2  // 这里是安装本地包 你自己的包鲁姆

新建两个文件

• src 目录下面 新建 index.js 测试mjs

import demo2 from "demo2";

console.log(demo2.add());

• src 目录下面 新建cjs.js 测试cjs

const demo1 = require("demo1");

console.log(demo1.add());

运行

• 运行import那个文件 就修改package.json下面的type

"type": "module"

• 运行命令

node ./index.js

• 运行require那个文件 就修改package.json下面的type

"type": "commonjs"

• 运行命令

node ./cjs.js

插件发布到npm

• 登录

npm login

• 发布

npm publish

更新

• 如果要是更新的话,先删除原来的,然后重新打包

• 接着把package.json里面的版本号新的版本号 必须比原先的大

• 然后重新发布

使用

• 安装

npm install 你的包名

• 使用

import demo2 from "demo2";

console.log(demo2.add());