公共组件库

miller

主要承载虚拟组件

使用组件

安装

npm i -S @digitforce/miller

加载&使用

就可以引用，并使用了，眼前放上了一个字符串转date的函数

import { strtotime } from "@digitforce/miller";
console.log(strtotime('2021-9-2 12:0:0'));

开发组件

结构

vite.config.ts vite配置
tsconfig.json typescript配置
.gitignore git过滤文件
.npmignore npm发包过滤文件
package.json npm包文件，发布公共组件来说，这里非常重要
public 静态文件目录
lib
┣ main.ts | 库主文件
src
┣ main.ts | 演示主文件
┗ App.vue | 入口文件

重点

1. lib是我们要发的包，src只是本地测试一下lib是否正确
2. 因为lib存在，src该有的配置，不要忘记lib
3. vite中必须设置build是按照lib方式发布
4. package是发包的重要内容

vite.config.ts

import { defineConfig } from 'vite'
import * as path from 'path'
import vue from '@vitejs/plugin-vue'

const LIB_NAME = 'miller';
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.ts'),
      name: LIB_NAME,
      fileName: format => `${LIB_NAME}.${format}.js`
    },
    rollupOptions: {
      external: ['vue', 'axios'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  plugins: [vue()]
})

要专门创建build，设置lib的发布方式

package.json

{
  "name": "@digitforce/miller",
  "version": "0.2.1",
  "author": "thales",
  "scripts": {
    "start": "npm run dev",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "type": "tsc lib/main.ts -d --outDir ./dist-lib",
    "serve": "vite preview"
  },
  "files": [
    "dist-lib"
  ],
  "main": "./dist-lib/main.js",
  "types": "./dist-lib/main.d.ts",
  "module": "./dist/miller.es.js",
  "exports": {
    ".": {
      "import": "./dist/miller.es.js",
      "require": "./dist/miller.umd.js"
    }
  },
  "dependencies": {
    "@sentry/browser": "^6.12.0",
    "@sentry/tracing": "^6.12.0",
    "axios": "^0.21.1",
    "core-js": "^3.17.1",
    "events": "^3.3.0"
  },
  "devDependencies": {
    "@types/events": "^3.0.0",
    "@types/node": "^16.7.10",
    "@types/prismjs": "^1.16.6",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "@vitejs/plugin-legacy": "^1.5.2",
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.2.6",
    "@vue/eslint-config-standard": "^6.1.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vueuse/core": "^6.0.0",
    "babel-plugin-prismjs": "^2.1.0",
    "prismjs": "^1.24.1",
    "sass": "^1.39.0",
    "sass-loader": "^12.1.0",
    "typescript": "^4.3.2",
    "vite": "^2.5.2",
    "vue": "^3.2.6",
    "vue-router": "^4.0.11",
    "vue-tsc": "^0.3.0"
  },
  "publishConfig": {
    "registry": "http://nexus.digitforce.com/repository/npm-hosted/"
  }
}

字段 | 描述 --- | --- name | 包名称，可以使用scope(@) version | 版本号，要保证每次都比之前大 main | 引用包，默认指向的目录 publishConfig | 发布包设置，因为咱们用的内部私服，请设置源