Мой модуль NPM не определен только при импорте в проект vue-cli - PullRequest
Новая
       46

Мой модуль NPM не определен только при импорте в проект vue-cli

0 голосов
/ 14 февраля 2019

Что я пытаюсь сделать

Я пишу плагин для vue.js, специально для использования в vue-cli.Этот плагин импортирует 3 .vue отдельных файловых компонентов и регистрирует их в функции установки с помощью Vue.component ().Я хочу иметь возможность установить этот плагин в любой проект, основанный на npm, используя установку npm, и требую, чтобы модуль установки предоставил модуль.

Что я уже сделал

У меня есть два проекта: один является действительным модулем, а другой - тестовым проектом, который использует этот модуль.

Модуль: https://github.com/fearedserpent/vue-drama-lite

Тестовый проект: https://github.com/fearedserpent/vue-drama-lite-test

Файл main.js в модуле импортирует файл 1 .vue и использует его для регистрации компонента в функции установки.Эта функция экспортируется по умолчанию. 

import dlCurtain from './components/dlCurtain.vue';

export default {
  install(Vue) {
    //Register component
    Vue.component('dl-curtain', dlCurtain);
    console.log('vue-drama-lite installed!');
  }
}

Поскольку файлы .vue не могут быть загружены без webpack и vue-loader, я создаю этот файл main.js и выводю файл bundle.js.Вот мой конфиг веб-пакета: 

const webpack = require('webpack');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'vueDramaLite',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      // {
      //     test: /\.js/,
      //     loaders: ['babel-loader'],
      //     exclude: /node_modules/,
      // },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.vue'
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Затем в файле package.json, в файле, который читает npm, я указываю "main" для этого недавно созданного файла bundle.js.Вот package.json: 

{
  "name": "@impaction/vue-drama-lite",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^2.1.0",
    "vue-loader": "^15.6.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.6",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack "
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fearedserpent/vue-drama-lite.git"
  },
  "author": "Shashank Rajesh",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/fearedserpent/vue-drama-lite/issues"
  },
  "homepage": "https://github.com/fearedserpent/vue-drama-lite#readme"
}

В чем проблема

Наконец, в моем тестовом проекте я импортирую этот модуль после установки и пытаюсь использовать его,Тем не менее, я получаю сообщение об ошибке в консоли: 

vue.runtime.esm.js?2b0e:5046 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5046)
    at eval (main.js?56d7:7)
    at Module../src/main.js (app.js:3126)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at Object.0 (app.js:3187)
    at __webpack_require__ (app.js:767)
    at app.js:902
    at app.js:905

По какой-то причине модуль не определен!Который не делает с тех пор, потому что, если я запускаю этот же модуль в node.js, все загружается идеально.Потратив часы, пытаясь понять это, я сдался.Может кто-нибудь сказать мне, если я делаю что-то явно неправильно?

...