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 }),...],
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图论最短路径以及floyd算法的MATLAB实现

图论是数学的一个分支&#xff0c;起源于18世纪。1736年&#xff0c;数学家欧拉通过解决“哥尼斯堡七桥问题”&#xff0c;将问题抽象成点和线的关系&#xff0c;并通过理论分析得出结论&#xff0c;这个过程标志着图论的产生&#xff0c;欧拉也因此被称为“图论之父”。图论研…

智慧城市解决方案大全:标准规范顶层设计指南、整体解决方案、厂商售前宣讲PPT、招投标、智慧城市白皮书等全套680份,一次性打包下载

关键词&#xff1a;智慧城市&#xff0c;智慧城市解决方案&#xff0c;智慧城市发展的前景与趋势&#xff0c;智慧城市概念主力流出&#xff0c;智慧城市项目包括哪些方面&#xff0c;智慧城市项目方案&#xff0c;智慧城市宣传片&#xff0c;智慧城市白皮书&#xff0c;智慧城…

MySQL之MVCC如何实现可重复读和提交读

(/≧▽≦)/~┴┴ 嗨~我叫小奥 ✨✨✨ &#x1f440;&#x1f440;&#x1f440; 个人博客&#xff1a;小奥的博客 &#x1f44d;&#x1f44d;&#x1f44d;&#xff1a;个人CSDN ⭐️⭐️⭐️&#xff1a;Github传送门 &#x1f379; 本人24应届生一枚&#xff0c;技术和水平有…

教程3_图像的轮廓

目录 目标 1. 特征矩 2、轮廓质心 3. 轮廓面积 4. 轮廓周长 5. 轮廓近似 6. 轮廓凸包 7. 边界矩形 7.1.直角矩形 7.2. 旋转矩形 8. 最小闭合圈 9. 拟合一个椭圆 10. 拟合直线 目标 在本文中&#xff0c;我们将学习 - 如何找到轮廓的不同特征&#xff0c;例如面积&…

力扣 217.存在重复元素

给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;num…

Ansible剧本playbooks详解

一、playbook简介 playbook是ansible用于配置&#xff0c;部署和管理托管主机剧本&#xff0c;通过playbook的详细描述&#xff0c;执行其中一系列tasks&#xff0c;playbook字面意思是剧本&#xff0c;现实中由演员按剧本表演&#xff0c;在ansible中由计算机进行安装&#x…

nginx负载均衡模式

轮询 (Round Robin) 用法&#xff1a;这是Nginx默认的负载均衡策略。每个请求会按顺序分配给upstream中的后端服务器&#xff0c;即按照配置的服务器列表顺序依次分配。 upstream backend {server backend1.example.com;server backend2.example.com;server backend3.example.c…

【Java】LinkedList vs. ArrayList:Java中的数据结构选择

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

docker日志大小设置(doker logs)

参考文章docker logs日志上限&#xff08;日志容量上限、日志大小上限&#xff09;&#xff08;默认大小、默认日志大小&#xff09;_docker 日志限制-CSDN博客 如果想要更改 Docker daemon 的全局默认设置&#xff0c;可以修改 Docker daemon 的配置文件 /etc/docker/daemon…

zookeeper--Znode类型详解---面试宝典

一、Znode分类 1、persistent_node 持久化节点 是默认类型&#xff0c;该类型节点&#xff0c;并不会随着客户端断开就会自动删除&#xff1b;zookeeper服务重启该节点也不会被删除&#xff0c;只有手动删除的时候才会删除&#xff1b;可以创建子节点&#xff1b; # create …

uniapp开发小程序遇到的问题,持续更新中

一、uniapp引入全局scss 在App.vue中引入uni.scss <style lang"scss">/* #ifndef APP-NVUE */import "uni.scss";/* #endif */ </style>注意&#xff1a;nvue页面的样式在编译时&#xff0c;有很多样式写法被限制了&#xff0c;容易报错。所…

【C++ leetcode】双指针(专题完结)

15. 三数之和 题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的…

驱动器的工艺结构原理及选型参数总结

🏡《总目录》 目录 1,概述2,工作原理2.1,信号转换2.2,电流放大2.3,电压级转换2.4,控制输出3,结构特点3.1,高集成度3.2,多功能性3.3,高性能3.4,省电节能3.5,稳定可靠4,工艺流程<

面试经典150题【101-110】

文章目录 面试经典150题【101-110】9.回文数61.加一172.阶乘后的069.x的平方根50.Pow(x,n)149.直线上最多的点数52.N皇后II120.三角形最小路径和64.最小路径和63.不同路径II 面试经典150题【101-110】 6道偏数学的题和4道二维dp 9.回文数 一开始想转为字符串再判断。后来发现…

信号处理--基于混合CNN和transfomer自注意力的多通道脑电信号的情绪分类的简单应用

目录 关于 工具 数据集 数据集简述 方法实现 数据读取 ​编辑数据预处理 传统机器学习模型(逻辑回归&#xff0c;支持向量机&#xff0c;随机森林) 多层感知机模型 CNNtransfomer模型 代码获取 关于 本实验利用结合了卷积神经网络 (CNN) 和 Transformer 组件的混合…

五-容量管理之容量预案

容量预案(Capacity Plan)是容量管理的一个重要组成部分。 容量预警条件和措施&#xff1a; 类型预警条件措施应用服务器Load95分位值大于CPU核数的2倍 前一天CPU 95分位值大于90% 内存使用率95分位值大于90%增加应用服务器数据库数据库连接超过200扩容DB服务规格/ 优化SQL查询…

windows下powershell与linux下bash美化教程(使用starship)

starship美化教程 Win11 Powershell 安装 在命令行使用下面命令安装 # 安装starship winget install starship将以下内容添加到 Microsoft.PowerShell_profile.ps1&#xff0c;可以在 PowerShell 通过 $PROFILE 变量来查询文件的位置 Invoke-Expression (&starship i…

【HBZ分享】Kafka为什么性能非常高

Kafka性能高的原因 磁盘顺序读写&#xff1a;磁盘顺序读写的性能可以和内存相媲美&#xff0c;顺序读写不需要寻道时间&#xff0c;也不需要大幅旋转磁头找扇区&#xff0c;所以性能极高 零拷贝&#xff1a; 大幅降低了用户态与内核态之间的切换&#xff0c;从而减少了数据来回…

Chrome安装Vue插件vue-devtools

安装Vue.js开发者工具&#xff08;Vue DevTools&#xff09;到Google Chrome浏览器的步骤可能会随着Vue DevTools更新和Chrome政策变化而有所调整。 1.从GitHub获取源代码&#xff1a; 访问Vue DevTools的GitHub仓库&#xff1a;https://github.com/vuejs/vue-devtools 根据仓…

web学习笔记(四十五)Node.js

目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3 node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3 向文件写入指定内容 2.4 创…