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

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 linkpnpm run build 及 "wzm-cli-demo"

相关推荐
倚肆1 天前
CSS ::before 和 ::after 伪元素详解
前端·css
华洛1 天前
聊一下如何稳定的控制大模型的输出格式
前端·产品经理·ai编程
你听得到111 天前
卷不动了?我写了一个 Flutter 全链路监控 SDK,从卡顿、崩溃到性能,一次性搞定!
前端·flutter·性能优化
IT_陈寒1 天前
Python 3.12震撼发布:5大性能优化让你的代码提速50%,第3点太香了!
前端·人工智能·后端
恋猫de小郭1 天前
今年各大厂都在跟进的智能眼镜是什么?为什么它突然就成为热点之一?它是否是机会?
android·前端·人工智能
艾小码1 天前
从原型到类:JavaScript面向对象编程的终极进化指南
前端·javascript
咖啡の猫1 天前
Vue混入
前端·javascript·vue.js
两个西柚呀1 天前
未在props中声明的属性
前端·javascript·vue.js
子伟-H51 天前
App开发框架调研对比
前端
桃子不吃李子1 天前
axios的二次封装
前端·学习·axios