[英]How to publish a Vue plugin into NPM?
I wrote a very simple plugin for Voca.js by Typescript.我通过 Typescript 为Voca.js编写了一个非常简单的插件。 You can find the source code here .您可以在此处找到源代码。
index.ts索引.ts
import VueVoca from './vue-voca';
export {
VueVoca
};
vue-voca.ts vue-voca.ts
import vue from 'vue';
export default {
install(Vue: typeof vue) {
Vue.prototype.$voca = require('voca');
}
};
vue.d.ts vue.d.ts
import Vue from 'vue';
import vc from 'voca';
declare module 'vue/types/vue' {
export interface Vue {
$voca: vc.VocaStatic;
}
}
To create npm package I use this command要创建 npm 包,我使用此命令
vue-cli-service build --name vue-voca --entry ./src/index.ts --target lib
and npm pack
. vue-cli-service build --name vue-voca --entry ./src/index.ts --target lib
和npm pack
。
package.json包.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"
]
}
But after using the npm package in another project I got an error.但是在另一个项目中使用 npm 包后出现错误。 VueVoca does not recognize and Typescript can not work with it well. 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>
Can anyone help me to write a correct plugin with a correct npm
package?谁能帮我用正确的npm
包编写正确的插件?
The issue here is that you have written your plugin in TypeScript.这里的问题是你已经用 TypeScript 编写了你的插件。 So at a minimum, there are two type definitions:所以至少有两种类型定义:
index.ts
file after compilation index.d.ts - 包含编译后index.ts
文件的类型定义 Now your package.json
has types/typings
field is pointing to vue.d.ts
.现在你的package.json
有types/typings
vue.d.ts
字段指向vue.d.ts
。 For TypeScript, when this library is imported, it infers the module augmentation code.对于 TypeScript,当这个库被导入时,它会推断模块扩充代码。 It can never find at index.d.ts
file.它永远无法在index.d.ts
文件中找到。 So, in your Vue component, this.$voca()
will work with TS but not import { VueCoca } from 'vue-coca';
因此,在您的 Vue 组件中, this.$voca()
将与 TS 一起使用,但不能import { VueCoca } from 'vue-coca';
As a solution, set your types
field to <PATH>/index.d.ts
file.作为解决方案,将您的types
字段设置为<PATH>/index.d.ts
文件。 Also, rename vue.d.ts
to augment.d.ts
for the sake of brevity.另外,为了简洁起见,将vue.d.ts
重命名为augment.d.ts
。 The caller of this library should then write his own typings file - *.d.ts file where he will import this file like:这个库的调用者应该编写他自己的打字文件- *.d.ts文件,他将在其中导入这个文件,如:
import 'vue-coca/<PATH>/augment.d';
Alternately, you can also import this augmentation file inside your plugin's main index.ts
file.或者,您也可以在插件的主index.ts
文件中导入此扩充文件。 With this approach, users of this library will not have to include it separately.使用这种方法,该库的用户将不必单独包含它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.