用於將vue組件發布到npm包中的Webpack配置

Question

這是該組件的主要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配置嗎？ 我需要從此index.js輸出4個文件

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"

這是我第一次處理webpack，因此將非常感謝您的幫助

Answer 1

Webpack不支持esmodule作為輸出目標。 您可以創建commonjs模塊或umd/iife模塊。

如果您需要ESModule作為目標，請考慮使用Rollup.js 。 通常，當需要將庫和Webpack捆綁在一起進行應用程序捆綁時，應該使用Rollup 。 （注意：匯總很棒，但是TypeScript + .Vue文件+基於類的vue組件語法不起作用。）

此外，無論Webpack或匯總如何，都可以使用基於數組/多目標的導出。 請參閱以下鏈接以獲取更多詳細信息：

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

匯總： https ： //rollupjs.org/guide/en#configuration-files