将 .vue 发布到 npm 以与 browserify 一起使用

Posted 2023-02-23

【中文标题】将 .vue 发布到 npm 以与 browserify 一起使用

【英文标题】：Publishing .vue to npm for use with browserify

【发布时间】：2018-08-21 05:48:54

【问题描述】：

如何将 .vue 文件（作为带有子 .vue 文件的父组件）发布到 npm，以便您可以安装、要求和使用它作为带有 browserify as 的组件

let component = require('published-vue-component');

我只使用browserify；我根本不使用 webpack。因此，我使用 vueify 转换将所有 .vue 文件捆绑到单个 build.js 中。我目前看到的所有关于此的信息 a.) 显示您应该导出主 .vue 文件（不起作用）或 b.) 涉及 webpack。

如果您继续将组件与 vueify 转换捆绑并设置 "main": "the/bundle/path/index.js"，则似乎 vueify 转换在没有模板渲染功能的情况下无法工作，因此不适用于单个组件。

如果你只是简单地导出父 .vue 文件，当你需要组件时，你会从<template> 标签的第一个字符处得到一个语法错误。

【参考方案1】：

如果您将组件捆绑为 umd 模块，则可以将其导入 browserify 或 webpack。使用汇总和这个插件：http://vuejs.github.io/rollup-plugin-vue/

我在使用 vue-autosuggest 库时遇到了这个问题，browserify users were experiencing issues 导入了我的模块。

查看此示例汇总配置以获得灵感： https://github.com/Educents/vue-autosuggest/blob/master/build/rollup.umd.config.js

希望这会有所帮助！

【讨论】：

这声称可以满足我的需要 - 谢谢！ rollup-plugin-vue 的稀疏文档；尝试汇总并弄清楚您在配置中做了什么需要几个小时。我得到它工作后可以接受。

非常感谢您提供此信息。我认为这会起作用，但没有任何插件文档，我必须安排一个周末来学习汇总。也许我会在接下来的几个月里完成它；与此同时，我既不能断言也不能否认这是可行的。非常感谢您的宝贵时间。