Конфигурация Webpack для публикации компонента vue в пакет npm - PullRequest
Новая
       10

Конфигурация Webpack для публикации компонента vue в пакет npm

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

вот мой основной js-код для компонента 

import './sass/main.scss'
import Vlider from './Vlider.vue'

function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component('vlider', Vlider);
}

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);
}

Vlider.install = install;

export default Vlider

Может кто-нибудь помочь мне с конфигурацией webpack?Мне нужно вывести 4 файла из этого index.js

  1. dist / vlider.umd.js
  2. dist / vlider.esm.js
  3. dist / vlider.min.js
  4. vlider.css

, чтобы он мог поддерживать несколько точек входа в package.json

"main": "dist/vlider.umd.js",
"module": "dist/vlider.esm.js",
"unpkg": "dist/vlider.min.js",
"browser": "src/vlider.vue"

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

1 Ответ

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

Webpack не поддерживает esmodule в качестве выходной цели.Вы можете создать commonjs модуль или umd/iife модуль.

Если вам нужно ESModule в качестве цели, рассмотрите возможность использования Rollup.js .В общем, вы должны использовать Rollup , когда вам нужно объединить библиотеку, и Webpack для объединения приложений. (Примечание: накопительный пакет великолепен, но TypeScript + .Vue файлы + синтаксис компонента vue на основе классов не работает.)

Кроме того, независимо от Webpack или Rollup, вы можете использовать основанный на массиве/ экспорт нескольких целей.Для получения более подробной информации см. Следующие ссылки:

Webpack: https://webpack.js.org/concepts/targets/#multiple-targets

Сводный пакет: https://rollupjs.org/guide/en#configuration-files

...