utils 分包打包上架

分包

目录

├── packages
│   ├── utils
│   │   ├── tsconfig.build.json
│   │   ├── vite.config.ts
│   │   ├── package.json
│   │   ├── src
│   │   │    ├── index.ts
│   │   │    ├── tools
│   │   │    │     ├── test.ts (工具一)
│   │   │    │     ├── utils.ts (工具二)

tsconfig.build.json

{
  "extends": "../../tsconfig.src.json",
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": "./",
    "outDir": "./dist"
  },
  "include": ["src"]
}

vite.config.ts

import { generateConfig } from "../../build/build.config";

export default generateConfig({
  name: "tscomponentUtils",
  external: [],
  globals: {},
});

package.json

{
  "name": "@tscomponents/utils",
  "version": "1.2.0",
  "type": "module",
  "main": "./dist/umd/fangutils.umd.js",
  "module": "./dist/es/index.mjs",
  "types": "./dist/es/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/es/index.d.ts",
      "import": "./dist/es/index.mjs",
      "require": "./dist/umd/fangutils.umd.js"
    },
    "./*": "./dist/es/*.mjs"
  },
  "files": ["dist"],
  "author": "JSOPY",
  "license": "MIT",
  "repository": {
    "type": "git",
    "directory": "packages/tscomponents-utils"
  },
  "scripts": {
    "build": "vite build",
    "dev": "vite build --watch",
    "clean": "rimraf dist .turbo",
    "lint": "eslint . --ext .js,.ts",
    "lint:fix": "eslint . --ext .js,.ts --fix",
    "format": "prettier --write \"src/**/*.{js,ts,json}\"",
    "format:check": "prettier --check \"src/**/*.{js,ts,json}\""
  },
  "peerDependencies": {}
}

入口文件

• src/index.ts

export * from "./tools/test";
export * from "./tools/utils";

工具文件

• src/tools/test.ts

export function hello(to: string = "World") {
  const txt = `Hello ${to}!`;
  alert(txt);
  return txt;
}

// 生成个随机函数
export function random(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

• src/tools/utils.ts

// 封装一个函数 判断是否为空
export function isEmpty(value: any) {
  return value === null || value === undefined || value === "";
}

打包

npm run build

根目录 增加package.json

• main: 里面的mjs换成你自己的名字

• name: 里面的名字换成你自己的名字

• 关键字换成你自己的

{
    "name":"yj_mycomponent_utils",
    "version":"1.0.0",
    "main":"umd/mycomponentutils.umd.js",
    "module":"es/index.mjs",
    "types":"index.d.ts",
    "author":{
      "name":"yj"
    },
    "keywords":[
      "测试上传包",
      "ts",
      "yj"
    ]
  }

增加声明

• TS文件就不用了.但要是组件需要增加声明

告诉使用当前组件库的项目这个组件库是一个vue插件

注意

这里面每个组件下面都要有index.d.ts文件,里面内容一样

• lib/index.d.ts

import { App } from "vue";
declare const _default: {
  install(app: App): void;
};
export default _default;

改名

注意

1. 你打包以后的名称不叫index.js 或者index.umd.js,而是叫你的组件名称.比如chooseArea.js之类的

2. 在这里lib下面都改成index.js, index.umd.js, index.d.ts, index.css

架构

├── public
│   ├── favicon.ico
│   └── index.html
├── dist
│   ├── chooseArea
│   │   ├── index.d.ts
│   │   ├── index.mjs
│   │   ├── index.umd.js
│   │   ├── package.json
│   │   ├── index.css (可有可无)
│   ├── chooseCity
│   │   ├── index.d.ts
│   │   ├── index.mjs
│   │   ├── index.umd.js
│   │   ├── package.json
│   │   ├── index.css (可有可无)
│   ├── utils
│   │   ├── es(文件夹)
│   │   ├── umd(文件夹)
│   │   ├── package.json
│   ├── package.json
│   ├── index.cjs
│   ├── index.d.ts
│   ├── index.css
│   ├── index.mjs

上架

• 注意

WARNING

cd 到你打包后的文件夹里面

• 先登陆

npm login

• 登陆成功后发布

npm publish ./dist

更新

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

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

• 然后重新发布

使用

• 安装

npm install 你的包名

• main.ts里面使用

import "你的css路径";
import xxx from "你的包名";
app.use(xxx);