Vue 플러그인을 NPM에 게시하는 방법

Vue 플러그인을 NPM에 게시하는 방법

저는 Voca.js용 매우 간단한 플러그인을 Typescript별로 작성했습니다.소스코드는 여기서 찾을 수 있습니다.

인덱스.ts

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

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"
}

tsconfig(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패키지?

여기서의 문제는 당신이 TypeScript에 플러그인을 썼다는 것입니다.따라서 최소한 두 가지 유형의 정의가 있습니다.

• index.d.ts - 유형 정의를 포함합니다.index.ts편찬 후 파일
• vue.d.ts - Vue 플러그인의 Vue.js 모듈 증강 코드가 포함되어 있습니다.

이제 당신의package.json가지다types/typings필드가 가리키고 있다vue.d.ts. TypeScript의 경우 이 라이브러리를 Import하면 모듈 증강 코드가 반영됩니다.에서 찾을 수 없다.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이 접근 방식을 사용하면 이 라이브러리의 사용자가 별도로 파일을 포함할 필요가 없습니다.

언급URL : https://stackoverflow.com/questions/54908469/how-to-publish-a-vue-plugin-into-npm