如何将 Vue 插件发布到 NPM?

Posted

技术标签:

【中文标题】如何将 Vue 插件发布到 NPM?【英文标题】:How to publish a Vue plugin into NPM? 【发布时间】:2019-07-21 08:26:40 【问题描述】:

我用 Typescript 为Voca.js 写了一个非常简单的插件。可以找到源代码here。

index.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 libnpm pack

package.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"

tsconfig


  "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 包?

【问题讨论】:

【参考方案1】:

这里的问题是你已经用 TypeScript 编写了你的​​插件。所以至少有两种类型定义:

index.d.ts - 包含编译后index.ts 文件的类型定义 vue.d.ts - 包含 Vue 插件的 Vue.js 模块扩充代码。

现在您的package.jsontypes/typings 字段指向vue.d.ts。对于 TypeScript,当这个库被导入时,它会推断出模块扩充代码。它永远无法在index.d.ts 文件中找到。因此,在您的 Vue 组件中,this.$voca() 将适用于 TS,但不适用于 import VueCoca from 'vue-coca';

作为解决方案,将您的 types 字段设置为 &lt;PATH&gt;/index.d.ts 文件。此外,为简洁起见,将 vue.d.ts 重命名为 augment.d.ts。然后这个库的调用者应该编写他自己的 typings 文件 - *.d.ts 文件,他将在其中导入这个文件,例如:

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

或者,您也可以在插件的主 index.ts 文件中导入此扩充文件。使用这种方法,该库的用户不必单独包含它。

【讨论】:

编译后我也没有index.d.ts!所以Cannot find module 'vue-voca'.ts(2307) 抱歉,您可以在我的存储库上进行 PR 吗? 检查您的tsconfig.json 文件。启用--declaration 标志。它的默认值为假。完成后,它应该创建index.d.ts 文件。我可以做 PR 但需要一些时间。 谢谢,我找到了问题:) @HF_67 我遇到了同样的问题。你是怎么解决的?

以上是关于如何将 Vue 插件发布到 NPM?的主要内容,如果未能解决你的问题,请参考以下文章

vue封装插件并发布到npm上

vuejs 插件开发并发布到npm--vue组件开发并发布

vue插件开发流程详解-从开发到发布至npm

如何将自己的插件发布到npm上 / 发布到公司npm源上

如何将自己的插件发布到npm上 / 发布到公司npm源上

如何将自己的插件发布到npm上 / 发布到公司npm源上