14.2.企业级脚手架-tsup的配置和使用

20262025-08-22 17:13

1.配置tsup

执行pnpm i tsup,npm install -g typescript
tsc --init分别在根目录和cli目录下执行

根节点创建tsconfig.json文件

子项目的tsconfig.json文件继承根节点的tsconfig.json文件

1. tsup.config.ts配置

ts 复制代码

import { defineConfig } from "tsup"

export default  defineConfig ({
    "dts": true,
    "entry": ["./index.ts"],
    "format": ["cjs"],
    "outDir": "dist"

})

2.企业级脚手架\wzm-cli\tsconfig.json

json 复制代码

{
    "compilerOptions": {
        "target": "ES2015",
        "lib": ["ESNext", "DOM"],
        "module": "ESNext",
        "moduleResolution": "node",
    },
    "include": ["packages/**/*"]
}

3.企业级脚手架\wzm-cli\packages\cli\tsconfig.json

json 复制代码

{
    "extends": "../../tsconfig.json",
    "exclude": ["node_modules","dist"],
    "include": ["src","./tsup.config.ts"]
}

生成index.d.ts文件

4.根节点tsconfig.json配置，或者子节点配置

json 复制代码

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "declaration": true
    },

    "exclude": ["node_modules","dist"],
    "include": ["src","tsup.config.ts"]
}

tsconfig.json配置

javascript 复制代码

import { defineConfig } from "tsup"

export default  defineConfig ({
    "dts": true, // 生成类型声明文件
    "entry": ["./index.ts"], // 入口文件
    "format": ["cjs"], // 打包格式 cjs esm umd iife commonjs amd system
    "outDir": "dist" // 输出目录 
})

5.cli下的pacckage.json文件

json 复制代码

  "scripts": {
    "dev": "tsup --watch",
    "build": "tsup"
},

6.修改bin/wzmtest文件

javascript 复制代码

require('../dist/index.js')
console.log('hello world')

重新执行npm link 和 pnpm run build 及 "wzm-cli-demo"