初始化项目

yarn create vite
# 输入项目名
# 选择Others
# 选择create-vite-extra
# 选择TypeScript

目录介绍

viet-demo
    │  .gitignore
    │  index.d.ts          TS类型声明文件
    │  index.html          yarn dev的时候运行的前端页面
    │  package.json
    │  tsconfig.json
    │  vite.config.ts
    │
    ├─lib                  这里编写TS库代码
    │      main.ts
    │
    ├─public
    │      vite.svg
    │
    └─src                  index.html测试页面使用的代码
            main.ts
            style.css
            typescript.svg
            vite-env.d.ts

vite.config.ts

export default defineConfig({
    build: {
        lib: {
            entry: './lib/main.ts', // TS库入口文件
            name: 'Counter', // 挂载到全局的变量名，CDN导入的时候可以直接使用Counter变量
            fileName: 'counter', // 输出的文件名
        },
    },
});

package.json

• name: 包的名称，必须唯一
• version: 版本号，每次上传的版本号必须大于已经上传过的版本
• private: 是否为私有，npmjs对于私有包时收费的
• author: 配置作者名称
• keywords: 数组 ； 关键词，利于搜索
• repository：npmjs.com将会显示关联的github仓库
• files: 上传的文件
• main：npm包入口文件，commonjs规范
• module：npm包入口文件，es规范
• types: npm包类型声明文件

{
    "name": "demo",
    "version": "1.0.0",
    "description": "描述信息",
    "private": false,
    "keywords": ["tag1", "tag2"],
    "repository": {
        "type": "git",
        "url": "仓库地址",
    },
}

README.MD

读我文件，用于展示说明TS库的使用

声明文件

vite默认不会生成声明文件，但是，根目录的index.d.ts文件就是作为npm包的声明文件使用。

如果不想手写的话，可以试试vite-plugin-dts

/// vite.config.ts
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
    // ...
    plugins: [
        dts({
            outputDir: './dist',
            include: ['./lib'],
        }),
    ]
});

``

## 拷贝文件

发布的时候，如果有拷贝静态资源文件的需求

```shell
yarn add --dev rollup-plugin-copy

import { defineConfig } from 'vite';
import copy from 'rollup-plugin-copy';

export default defineConfig({
    build: {
        // ...
        emptyOutDir: false, // 默认为true，这将导致拷贝过来的文件被删除
    },
    plugins: [
        copy({
            verbose: true,
            targets: [
                {
                    src: './lib/xxx',
                    dest: './dist',
                }
            ]
        }),
    ]
});

发布

npm run build
npm publish