用于将 vue 组件发布到 npm 包中的 Webpack 配置

Posted 2023-02-23

【中文标题】用于将 vue 组件发布到 npm 包中的 Webpack 配置

【英文标题】：Webpack config for publishing vue component into an npm package

【发布时间】：2019-07-08 01:56:02

【问题描述】：

这是我的组件的主要 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 个文件

dist/vlider.umd.js dist/vlider.esm.js dist/vlider.min.js vlider.css

这样它就可以支持package.json中的多个入口点

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

这是我第一次与 webpack 打交道，非常感谢您的帮助

【参考方案1】：

Webpack 不支持 esmodule 作为输出目标。您可以创建commonjs 模块或umd/iife 模块。

如果您需要 ESModule 作为目标，请考虑使用 Rollup.js。一般来说，当你需要打包库时，你应该使用Rollup，而使用Webpack来打包应用程序。 （注意：Rollup 很棒，但是 TypeScript + .Vue 文件 + 基于类的 vue 组件语法不起作用。）

此外，无论是 Webpack 还是 Rollup，您都可以使用基于数组/多目标的导出。有关详细信息，请参阅以下链接：

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

汇总：https://rollupjs.org/guide/en#configuration-files

【讨论】：

感谢您的回答，我先尝试为汇总创建自己的配置，如果我再次卡住，如果您不介意，我会在这里问它

@KawishBehzad 应该没问题。作为一个好的做法，更新您的原始问题而不是使用带有代码 sn-ps 的评论。