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个文件

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，因此将非常感谢您的帮助

Answer 1

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

如果您需要ESModule作为目标，请考虑使用 Rollup.js 。通常，在需要捆绑库和 Webpack 进行应用捆绑时，应使用 Rollup 。 （注意：汇总很棒，但是TypeScript + .Vue文件+基于类的vue组件语法不起作用。）

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

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

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

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

1 个答案: