如何將 Vue 插件發布到 NPM 中？

Question

我通過 Typescript 為Voca.js編寫了一個非常簡單的插件。 您可以在此處找到源代碼。

索引.ts

import VueVoca from './vue-voca';
export {
    VueVoca
};

vue-voca.ts

import vue from 'vue';

export default {
  install(Vue: typeof vue) {
    Vue.prototype.$voca = require('voca');
  }
};

vue.d.ts

import Vue from 'vue';
import vc from 'voca';
declare module 'vue/types/vue' {
  export interface Vue {
    $voca: vc.VocaStatic;
  }
}

要創建 npm 包，我使用此命令

vue-cli-service build --name vue-voca --entry ./src/index.ts --target lib和npm pack 。

包.json

{
  "name": "vue-voca",
  "version": "1.0.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve ./example/main.ts --open",
    "build": "vue-cli-service build --name vue-voca --entry ./src/index.ts --target lib",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "@types/voca": "^1.4.0",
    "voca": "^1.4.0",
    "vue": "^2.6.7"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^3.4.1",
    "@vue/cli-service": "^3.4.1",
    "fibers": "^3.1.1",
    "sass": "^1.17.2",
    "sass-loader": "^7.1.0",
    "typescript": "^3.3.3333",
    "vue-cli-plugin-component": "^1.10.5",
    "vue-template-compiler": "^2.6.7"
  },
  "files": [
    "dist/*.css",
    "dist/*.map",
    "dist/*.js",
    "src/*"
  ],
  "keywords": [
    "vue",
    "component"
  ],
  "types": "src/vue.d.ts",
  "typings": "src/vue.d.ts",
  "main": "dist/vue-services.umd.js",
  "module": "dist/vue-services.common.js"
}

配置文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "declaration": true,  
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

但是在另一個項目中使用 npm 包后出現錯誤。 VueVoca 無法識別並且 Typescript 無法很好地使用它。

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in render: "TypeError: Cannot read property 'swapCase' of undefined"

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root>

誰能幫我用正確的npm包編寫正確的插件？

Answer 1

這里的問題是你已經用 TypeScript 編寫了你的​​插件。 所以至少有兩種類型定義：

• index.d.ts - 包含編譯后index.ts文件的類型定義
• vue.d.ts - 包含 Vue 插件的 Vue.js 模塊擴充代碼。

現在你的package.json有types/typings vue.d.ts字段指向vue.d.ts 。 對於 TypeScript，當這個庫被導入時，它會推斷模塊擴充代碼。 它永遠無法在index.d.ts文件中找到。 因此，在您的 Vue 組件中， this.$voca()將與 TS 一起使用，但不能import { VueCoca } from 'vue-coca';

作為解決方案，將您的types字段設置為<PATH>/index.d.ts文件。 另外，為了簡潔起見，將vue.d.ts重命名為augment.d.ts 。 這個庫的調用者應該編寫他自己的打字文件- *.d.ts文件，他將在其中導入這個文件，如：

import 'vue-coca/<PATH>/augment.d';

或者，您也可以在插件的主index.ts文件中導入此擴充文件。 使用這種方法，該庫的用戶將不必單獨包含它。