1

私は vuejs を学んでおり、vue/cli バージョン 4.xx のような最新バージョンを使用していますが、次のようなタスクを実行したいと考えています。

  1. vue/cli バージョン 4.xx を使用して単純なヘッダーを作成する必要があります。これは、ヘッダー変数内の配列を小道具として受け取ります。

  2. 今、npmで公開したいと思います。

    1. 次に、typescript をクラス ベースのスタイルとして使用する別の vue プロジェクトを作成し、このプロジェクトの 2 番目のステップで npm パッケージの作成を使用します。

このアプローチを完了するために、いくつかの記事に従いました。そのリンクは以下に記載され ています NPMでVuejsコンポーネントを作成して公開する方法

別の記事はこれです: https://dev.to/amroessam/publish-your-first-npm-package-vue-263h

最後の記事はこれです: https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

ヘッダーを作成してnpmで公開することはできますが、そのnpmパッケージをまったく使用できず、エラーが発生します。

この依存関係は見つかりませんでした:

  • ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs の header-bell-app。 js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UserComponent/UserComponent.vue?vue&type=script&lang=js&

インストールするには、次を実行します: npm install --save header-bell-app

header-bell-app という名前のヘッダー パッケージを作成してインストールしましたが、どこかにインポートしようとするとエラーが発生しました。

この画像では、コードの構造を持っています以下は私の header-bell npm パッケージのコードとスクリーンショットです:

    entry.js
import component from "./headerComponent.vue";

function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("header-component", component);
}

const plugin = {
  install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

component.install = install;

export default component;




HeaderComponent.vue

<template>
  <div>
    <div class="header">
      <div class="header-right">
        <a v-for="header in headers" v-bind:key="header.id" v-bind:href="header.url">{{header.name}}</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeaderComponent",
  props: {
    headers: []
  },
  mounted() {}
};
</script>
<style scoped>
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
</style>




rollup.config.js

import vue from "rollup-plugin-vue";
import buble from "rollup-plugin-buble";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: 'src/entry.js', // Path relative to package.json
  output: {
      name: 'HeaderComponent',
      exports: 'named',
  },
  plugins: [
      commonjs(),
      vue({
          css: true, // Dynamically inject css as a <style> tag
          compileTemplate: true, // Explicitly convert template to render function
      }),
      buble(), // Transpile to ES5
  ],
};



package.json

{
  "name": "header-bell",
  "version": "0.1.2",
  "main": "dist/headercomponent.umd.js",
  "module": "dist/headercomponent.esm.js",
  "unpkg": "dist/headercomponent.min.js",
  "browser": {
    "./sfc": "src/HeaderComponent.vue"
  },
  "files": [
    "dist/*",
    "src/*",
    "attributes.json",
    "tags.json"
  ],
  "vetur": {
    "tags": "tags.json",
    "attributes": "attributes.json"
  },
  "scripts": {
    "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/headercomponent.umd.js",
    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/headercomponent.esm.js",
    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/headercomponent.min.js"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "minimist": "^1.2.0",
    "rollup": "^1.14.4",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.7.2",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  }
}

そして、header-bellをインストールした後、以下のような別のプロジェクトで上記のパッケージを使用しています

ここに画像の説明を入力

今、私にエラーを与えています

モジュール 'header-bell' の宣言ファイルが見つかりませんでした。「d:/Alok/Work/References/interceptor-boilerplate/node_modules/header-bell/dist/headercomponent.umd.js」には、暗黙的に「any」タイプがあります。存在するかどうかを試すnpm install @types/header-bellか、「declare module 'header-bell';」を含む新しい宣言 (.d.ts) ファイルを追加します。

HeaderComponent の使用中のコンソールのエラーは下の画像にあります

ここに画像の説明を入力

これが私のことを正すのに十分な証拠になることを願っています。これに対する最善の解決策を教えていただければ幸いです。

4

0 に答える 0