Vue.use(플러그인)가 'install' 함수를 호출하지 않음

Vue.use(플러그인)가 'install' 함수를 호출하지 않음

커스텀 vue 컴포넌트를 NPM 모듈로 내보내는 작업을 하고 있습니다.공식 문서 "Packaging Vue Components for npm"에 기재된 절차를 따릅니다.

나의index.js아카wrapper.js파일:

// index.js -> wrapper.js

// Import vue component
import component from "./components/VueOpenapiForm.vue";
import ExtendSchema from "./functional-components/extend-schema.js";
// global components
import ObjectForm from "./components/ObjectForm.vue";
import ArrayInput from "./components/ArrayInput.vue";
import KeyValuePairs from "./components/KeyValuePairs.vue";
import SimpleInput from "./components/SimpleInput.vue";

// export ExtendSchema
export const extendSchema = ExtendSchema;

// Declare install function executed by Vue.use()
export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("VueOpenapiForm", component);

  Vue.component("object-form", ObjectForm);
  Vue.component("array-input", ArrayInput);
  Vue.component("key-value-pairs", KeyValuePairs);
  Vue.component("simple-input", SimpleInput);
}

// Create module definition for Vue.use()
const plugin = {
  install
};

// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

// To allow use as module (npm/webpack/etc.) export component
export default component;

rollup.config.js파일:

// rollup.config.js
import babel from "rollup-plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs"; // Convert CommonJS modules to ES6
import vue from "rollup-plugin-vue"; // Handle .vue SFC files
import buble from "@rollup/plugin-buble"; // Transpile/polyfill with reasonable browser support
export default {
  input: "src/index.js", // Path relative to package.json
  output: {
    name: "VueOpenapiForm",
    exports: "named"
  },
  plugins: [
    resolve(),
    commonjs({
      namedExports: {
        // left-hand side can be an absolute path, a path
        // relative to the current directory, or the name
        // of a module in node_modules
        "vue-codemirror": ["codemirror"]
      }
    }),

    babel({
      runtimeHelpers: true,
      exclude: "node_modules/**",
      plugins: [
        "@babel/plugin-external-helpers",
        "@babel/plugin-transform-runtime"
      ]
    }),
    vue({
      css: true, // Dynamically inject css as a <style> tag
      compileTemplate: true // Explicitly convert template to render function,
    }),
    buble() // Transpile to ES5
  ]
};

패키지.json

{
  "name": "@appscode/vue-openapi-form",
  "version": "0.1.0",
  "main": "dist/vue-openapi-form.umd.js",
  "module": "dist/vue-openapi-form.esm.js",
  "unpkg": "dist/vue-openapi-form.min.js",
  "browser": {
    "./sfc": "src/vue-openapi-form.vue"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "pkg": "npm run pkg:umd & npm run pkg:es & npm run pkg:unpkg",
    "pkg:umd": "rollup --config pkg/rollup.config.js --format umd --file dist/vue-openapi-form.umd.js",
    "pkg:es": "rollup --config pkg/rollup.config.js --format es --file dist/vue-openapi-form.es.js",
    "pkg:unpkg": "rollup --config pkg/rollup.config.js --format iife --file dist/vue-openapi-form.min.js"
  },
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "bulma": "^0.8.0",
    "bulma-switch": "^2.0.0",
    "core-js": "^3.3.2",
    "font-awesome": "^4.7.0",
    "vee-validate": "^3.1.3",
    "vue": "^2.6.10",
    "vue-codemirror": "^4.0.6",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/plugin-external-helpers": "^7.7.4",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@rollup/plugin-buble": "^0.20.0",
    "@rollup/plugin-node-resolve": "^6.0.0",
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.18.2",
    "rollup": "^1.17.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^5.0.1",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "description": "A Vue component to generate html form using OpenAPI v3 schema",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/appscode/vue-openapi-form.git"
  },
  "keywords": [
    "json-schema",
    "vue",
    "openapi",
    "kubernetes"
  ],
  "author": "support@appscode.com",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/appscode/vue-openapi-form/issues"
  },
  "homepage": "https://github.com/appscode/vue-openapi-form#readme"
}

---

내가 달릴 때npm run pkg롤업은 컴포넌트를 번들하고 dist 폴더에 3개의 파일을 생성합니다.

• vue-openapi-form.es.http://filename
• vue-openapi-form.min.disples
• vue-openapi-form.umd.syslog

---

이 번들 컴포넌트를 다른 Vue 프로젝트 내에 Import하려고 합니다.의 새로운 프로젝트main.js파일:

// main.js
...

import VueOpenapiForm from "@appscode/vue-openapi-form"
Vue.use(VueOpenapiForm)

...

자, 제가 이걸 쓰려고 하면vue-openapi-form~하듯이htmlvue 템플릿 내에서 태그를 지정합니다.다음과 같은 오류가 있습니다.

[Vue warn]: Unknown custom element: <vue-openapi-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue

---

내가 여기서 뭘 잘못하고 있는지 누가 말해 줄 수 있나요? 나는 그 모든 구성 요소들이 재귀적이기 때문에 글로벌하게 선언되어야 합니다.인스톨 기능은 그 기능만을 실행하는데, 사용시에 호출이 되지 않는다.Vue.use어떻게 하면 해결할 수 있을까요?

언급URL : https://stackoverflow.com/questions/59424503/vue-useplugin-not-invoking-the-install-function