I developed a straightforward plugin for Voca.js using Typescript. The source code can be found 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;
}
}
To create an npm package, I used the following command
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"
]
}
However, when implementing the npm package in another project, I encountered an error where VueVoca was not recognized and Typescript could not work with it properly.
https://i.sstatic.net/66Zw1.png
https://i.sstatic.net/G8EKl.png
https://i.sstatic.net/b72Hz.png
https://i.sstatic.net/st0Va.png
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 someone assist me in developing a correct plugin with a proper npm package?