当前位置: 首页 > news >正文

Vue 2 组件发布到 npm 的常见问题解决

按照 Vue 2 组件打包并发布到 npm 的方法配置项目后,项目在实际开发过程中,随着代码写法的多样性增加而遇到的各种打包问题,本文将予以逐一解决:

本文目录

同时导出多个组件

样式表 import 问题解决

Json 文件 import 问题解决

"@"路径别名无法识别的问题

??, ?. 等运算符无法编译的问题解决

jsx 语法的支持

支持 TypeScript


同时导出多个组件

修改 wrapper.js 即可

import component1 from './components/MyComponent1.vue';
import component2 from './components/MyComponent2.vue';export function install(Vue) {if (install.installed) return;install.installed = true;Vue.component('MyComponent1', component1);Vue.component('MyComponent2', component2);
}...// export default component;export {component1 as MyComponent1,component2 as MyComponent2,
}

样式表 import 问题解决

<script>
import "../scss/common.scss";
...
</script>

如上代码所示,如果在 .vue 页面的 script 标签间 import 样式表(或者在 .js 文件中 import 样式表),会在打包时报错,如下

关键报错信息:SyntaxError: Unexpected token

针对 .scss, .sass 和 .css 样式表的解决办法如下

安装 rollup-plugin-scss 插件

npm i rollup-plugin-scss -D

修改 rollup.config

...
import scss from 'rollup-plugin-scss';export default {...plugins: [commonjs(),scss({ insert: true }),image(),...],
};

Json 文件 import 问题解决

<script>
...
import info from "../data/info.json";export default {...mounted() {console.log("读取 json 文件内容 :>> ", info);},
};
</script>

如上代码所示,引入 .json 文件会导致打包报错:

关键报错信息:SyntaxError: Unexpected token

解决方法如下

安装 @rollup/plugin-json 插件

npm i @rollup/plugin-json -D

修改 rollup.config

...
import json from '@rollup/plugin-json';export default {...plugins: [commonjs(),scss({ insert: true }),image(),json(),...],
};

"@"路径别名无法识别的问题

如下,使用了 Vue 原生支持的 @ 作为路径别名

<script>
import LOGO from "@/assets/logo.png";
import "@/scss/common.scss";
import info from "@/data/info.json";
...
</script>

但打包时会报警告

关键警告信息:Unresolved dependencies

解决方法如下

安装 @rollup/plugin-alias 插件

npm i @rollup/plugin-alias -D

修改 rollup.config

...
import { fileURLToPath } from 'url';
import path from 'path';
import alias from '@rollup/plugin-alias';const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const projectRootDir = path.resolve(__dirname, '..');export default {...plugins: [commonjs(),alias({entries: [{find: '@',replacement: path.resolve(projectRootDir, 'src'),}]}),scss({ insert: true }),image(),json(),...],
};

??, ?. 等运算符无法编译的问题解决

如下,代码中出现空值合并运算符(??)或可选链运算符(?.)时

<script>
...
export default {...mounted() {let x;const y = x ?? 1;},
};
</script>

出现如下报错

关键报错信息:SyntaxError: Unexpected token

解决此问题,要么把 ?? 和 ?. 的语法替换为其它等效的算法

要么如下所示,把本来所用的 @rollup/plugin-buble 插件替换为 @rollup/plugin-babel 插件

安装 @rollup/plugin-babel 插件

npm i @rollup/plugin-babel -D

修改 rollup.config

...
import { babel } from '@rollup/plugin-babel';
...
export default {...plugins: [...vue({css: true, // Dynamically inject css as a <style> tagcompileTemplate: true, // Explicitly convert template to render function}),// buble({//     objectAssign: true,//     transforms: {//         asyncAwait: false,//         forOf: false,//     }// }), // Transpile to ES5babel({babelHelpers: 'runtime',exclude: 'node_modules/**'}),],
};

jsx 语法的支持

<template><div class="component my-component"><img :src="logoSrc" /><Title /></div>
</template><script>
...
const Title = {name: "title",render() {return <span>标题</span>; // jsx 语法},
};export default {components: { Title },...
};
</script>

以上写法将导致打包出错:

关键报错信息:(plugin commonjs--resolver) RollupError: Expression expected

解决方法如下

安装 unplugin-vue-jsx 插件

npm i unplugin-vue-jsx -D

修改 rollup.config

...
import VueJsx from 'unplugin-vue-jsx/rollup';
...
export default {...plugins: [commonjs({ exclude: 'src/**' }), // 需要排除掉包含 jsx 语法的文件,否则 VueJsx 无效,原因未知...VueJsx({ version: 2 }),vue({css: true, // Dynamically inject css as a <style> tagcompileTemplate: true, // Explicitly convert template to render function}),...],
};

支持 TypeScript

如果本项目已配置为支持 TypeScript 的 Vue2 项目,则在打包时会报错

关键报错信息:Note that you need plugins to import files that are not JavaScript

解决方法如下

安装 rollup-plugin-typescript2 插件

npm i rollup-plugin-typescript2 -D

注:为什么不使用 @rollup/plugin-typescript ?请参考 vue.js - Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package - Stack Overflow

修改 rollup.config

...
import typescript2 from 'rollup-plugin-typescript2';
...
export default {...plugins: [typescript2({useTsconfigDeclarationDir: true,// tsconfigOverride: { // 是否覆盖 tsconfig.json 的设置//     compilerOptions: {//         declaration: false,//     }// }}),commonjs({ exclude: 'src/**' }),...],
};

如果希望输出类型说明文件(d.ts),则增加以下两步

修改 tsconfig.json

{"compilerOptions": {..."sourceMap": false,"declaration": true,"declarationDir": "dist/types","baseUrl": ".",...},...
}

修改 package.json

{..."license": "MIT","main": "dist/my-component.umd.js","module": "dist/my-component.esm.js","unpkg": "dist/my-component.min.js","types": "dist/types/main.d.ts",...
}

如果需要生成 source map,则如下配置

修改 tsconfig.json

...
export default {...output: {name: 'MyComponent',exports: 'named',sourcemap: true,},...
};

即在 output 中增加 sourcemap: true

tsconfig.json 中的配置项 sourceMap 最好也写成 "sourceMap": true,虽然在本案例中并不会形成实质区别


衍生问题解决

如下,按 ts 风格编写的 Vue 组件中,引入了 vue

<script lang="ts">
import Vue from "vue";
...export default Vue.extend({...
});
</script>

打包时会报如下警告

关键警告信息:Unresolved dependencies

消除警告方法如下

安装 @rollup/plugin-node-resolve 插件

npm i @rollup/plugin-node-resolve -D

修改 rollup.config

...
import resolve from '@rollup/plugin-node-resolve';
...
export default {...plugins: [...scss({ insert: true }),image(),json(),resolve(),VueJsx({ version: 2 }),...],
};

相关文章:

Vue 2 组件发布到 npm 的常见问题解决

按照 Vue 2 组件打包并发布到 npm 的方法配置项目后&#xff0c;项目在实际开发过程中&#xff0c;随着代码写法的多样性增加而遇到的各种打包问题&#xff0c;本文将予以逐一解决&#xff1a; 本文目录 同时导出多个组件 样式表 import 问题解决 Json 文件 import 问题解决…...

p2p原理

p2p原理 P2P (Peer-to-Peer) 是一种分布式计算和网络架构模型&#xff0c;它允许对等节点之间直接通信和共享资源&#xff0c;而无需通过集中的服务器。P2P 原理的核心概念是平等性&#xff08;peer equality&#xff09;&#xff0c;即所有节点在网络中都具有相同的功能和能力…...

从供方协议管理到外部供方管理

从GJB 5000A的供方协议管理到GJB 5000B的外部供方管理&#xff0c;军用软件的研制对承接单位有了更高的标准和要求&#xff0c;也对外部供方管理有了更改的要求&#xff0c;让我们看看具体的变化吧&#xff01; 供方协议管理的目的&#xff1a; 管理供方产品的获取工作。 外部…...

微服务demo(四)nacosfeigngateway

一、gateway使用&#xff1a; 1、集成方法 1.1、pom依赖&#xff1a; 建议&#xff1a;gateway模块的pom不要去继承父工程的pom&#xff0c;父工程的pom依赖太多&#xff0c;极大可能会导致运行报错&#xff0c;新建gateway子工程后&#xff0c;pom父类就采用默认的spring-b…...

2D与动画

2D转换 1.移动 translate 1. 语法 transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n); 2.重点 定义 2D 转换中的移动&#xff0c;沿着 X 和 Y 轴移动元素 translate最大的优点&#xff1a;不会影响到其他元素的位置 translat…...

Maven:构建现代化软件项目的强大工具

在软件开发的世界中&#xff0c;Maven 是一个备受欢迎的构建工具。它提供了一种标准化、自动化的方式来管理项目的依赖、构建过程和部署。本文将深入探讨 Maven 的各个方面&#xff0c;帮助您更好地理解和使用这一强大的工具。 一、Maven 的简介 Maven 是一个基于项目…...

脏牛提权(靶机复现)

目录 一、脏牛漏洞概述 二、漏洞复现 1.nmap信息收集 1.1.查看当前IP地址 1.2.扫描当前网段,找出目标机器 1.3.快速扫描目标机全端口 三、访问收集到的资产 192.168.40.134:80 192.168.40.134:1898 四、msf攻击 1.查找对应exp 2.选择对应exp并配置相关设置 五、内…...

用html写一个贪吃蛇游戏

<!DOCTYPE html> <html> <head><title>贪吃蛇</title><meta charset"UTF-8"><meta name"keywords" content"贪吃蛇"><meta name"Description" content"这是一个初学者用来学习的小…...

Topaz Gigapixel AI for Mac 图像放大软件

Topaz Gigapixel AI for Mac是一款专为Mac用户设计的智能图像放大软件。它采用了人工智能技术&#xff0c;特别是深度学习算法&#xff0c;以提高图像的分辨率和质量&#xff0c;使得图像在放大后仍能保持清晰的细节。这款软件的特点在于其能够将低分辨率的图片放大至高分辨率&…...

uniapp先显示提示消息再返回上一页

一、描述 在有些业务场景中&#xff0c;需要先弹出提示后&#xff0c;再返回上一页。 二、思路 使用定时器&#xff0c;先弹出提示消息&#xff0c;然后开个定时器俩秒后再执行&#xff0c;返回上一页的操作&#xff0c;并且清除定时器。 三、实现 uni.showToast({title: …...

【爬虫开发】爬虫从0到1全知识md笔记第2篇:requests模块,知识点:【附代码文档】

爬虫开发从0到1全知识教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;爬虫课程概要&#xff0c;爬虫基础爬虫概述,,http协议复习。requests模块&#xff0c;requests模块1. requests模块介绍,2. response响应对象,3. requests模块发送请求,4. request…...

【算法刷题day11】Leetcode: 20. 有效的括号、 1047. 删除字符串中的所有相邻重复项、150. 逆波兰表达式求值

20. 有效的括号 文档链接&#xff1a;[代码随想录] 题目链接&#xff1a;20. 有效的括号 状态&#xff1a;ok 题目&#xff1a; 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符…...

推荐算法策略需求-rank model优化

1.pred_oobe (base) [rusxx]$ pwd /home/disk2/data/xx/icode/baidu/oxygen/rus-pipeline/pipeline-migrate/UserBaseActiveStatPipeline/his_session (base) [rusxx]$ sh test.sh 2. user_skill_history_dict_expt2包含userid [workxx]$ vim /home/work/xx/du-rus/du_rus_o…...

hadoop 常用命令

hadoop 常用命令 hadoop fs -mkdir /test hadoop fs -put /opt/frank/tb_test03.txt /test/ hadoop fs -ls /test/ hadoop fs -cat /test/tb_test03.txt hadoop fs -rm /test/tb_test03.txt hadoop dfs 也能使用、但不推荐&#xff0c;执行会提示&#xff1a; DEPRECATED: Us…...

pdf在浏览器上无法正常加载的问题

一、背景 觉得很有意思给大家分享一下。事情是这样的&#xff0c;开发给我反馈说&#xff0c;线上环境接口请求展示pdf异常&#xff0c;此时碰巧我前不久正好在ingress前加了一层nginx&#xff0c;恰逢此时内心五谷杂陈&#xff0c;思路第一时间便放在了改动项。捣鼓了好久无果…...

实时语音识别(Python+HTML实战)

项目下载地址&#xff1a;FunASR 1 安装库文件 项目提示所需要下载的库文件&#xff1a;pip install -U funasr 和 pip install modelscope 运行过程中&#xff0c;我发现还需要下载以下库文件才能正常运行&#xff1a; 下载&#xff1a;pip install websockets&#xff0c;pi…...

x86_64 ubuntu22.04编译MetaRTC

metaRTC5.0 API https://github.com/metartc/metaRTC/wiki/metaRTC5.0-API Sample https://github.com/metartc/metaRTC/wiki/metaRTC5.0-API-Sample MetaRTC7.0编译 https://github.com/metartc/metaRTC/wiki/Here-we-come,-write-a-C-version-of-webRTC-that-runs-everywhere…...

FreeRTOS day1

1.总结keil5下载代码和编译代码需要注意的事项 需要与板子连通 配置完成后才点击下载 2.总结STM32Cubemx的使用方法和需要注意的事项 下载支持包 打开芯片配置界面 3.总结STM32Cubemx配置GPIO的方法...

SqlSugar快速入门

文章目录 配置SqlSugar0、引入SqlSugarCore包1、编写Context类2、配置实体类3、创建Service服务类进行数据库的CRUD4、配置Controller进行路由 配置SqlSugar 0、引入SqlSugarCore包 1、编写Context类 public static SqlSugarClient db new SqlSugarClient(new ConnectionCon…...

基于el-table实现行内增删改

实现效果&#xff1a; 核心代码&#xff1a; <el-table :data"items"style"width: 100%;margin-top: 16px"border:key"randomKey"><el-table-column label"计划名称"property"name"><template slot-scope&q…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

2.2.2 ASPICE的需求分析

ASPICE的需求分析是汽车软件开发过程中至关重要的一环&#xff0c;它涉及到对需求进行详细分析、验证和确认&#xff0c;以确保软件产品能够满足客户和用户的需求。在ASPICE中&#xff0c;需求分析的关键步骤包括&#xff1a; 需求细化&#xff1a;将从需求收集阶段获得的高层需…...

用js实现常见排序算法

以下是几种常见排序算法的 JS实现&#xff0c;包括选择排序、冒泡排序、插入排序、快速排序和归并排序&#xff0c;以及每种算法的特点和复杂度分析 1. 选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每次从未排序部分选择最小元素&#xff0c;与未排…...