近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下： 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想，也就是工程
Rollup 设计之初就是面向 ES Module 的，构建出结构扁平，性能出众的类库。
在前端项目的开发中，往往会根据业务需求，沉淀出一些项目内的UI组件/功能模块（以下通称组件） 等；这些组件初期只在同一个项目中被维护，并被该项目中的不同页面或模块复用，此时的组件逐步被完善，是一个只聚焦于功能和健壮性的成长期。
本次主要跟大家分享学习下 vue2 的部分知识。网上大部分知识讲解都是抽离的形式，对应哪个函数直接拿出来讲解，但是对于新手或者不了解内在原理的，逻辑图谱不是很清晰，不成体系。很容易忘记，所以本次系列计划从零还是手写，实现部分功能。
本文是 基于Vite+AntDesignVue打造业务组件库[2] 专栏第 7 篇文章【在发布组件库之前，你需要先掌握构建和发布函数库】，聊聊怎么构建和发布一个函数库。
本站建立时便未使用 WordPress 自带评论系统，原因主要是在有比较多的功能需求需要适配和实现的情况下，二次开发比较耗时费劲。所以一直采用的是 Artalk (https://github.com/qwqcode/Artalk)，功能非常完善；支持 Markdown、评论折叠、管理员等贴心功能。但是美中不足的其一是有后端部署的要求；其二是与博客的引用出于某些不清楚还没深究的原因效果不佳。最后的妥协是通过 iFrame 引用然后通过强制同源在父页面获取子页面窗口高度来实现评论区高度匹配。同时，这样的部署有几个影响用户体验的问题：
尤雨溪说Vite很快，我一开始是不相信的。直到我亲自使用过后，我被Vite的速度震惊到了。
https://majunchang.github.io/mi.vant/#/quickStart
简单来说, 完整构建 和 运行时构建的区别就是, 可不可以用template选项, 和文件大一点,小一点。而按照不同的规范可以运行在不同的开发环境中。
结果发现这一行 Ts 报错了，原因是 vue 的版本不一致，真实的场景下不会出现这个问题，因为真实情况下组件库用的是上级的依赖。
本节涉及的内容源码可在vue-pro-components c7 分支[1]找到，欢迎 支持！
这里打包的格式设置为umd ，打包模式可以设置的类型有 umd（原生js） ，cjs （commonjs）, es (es) 。
之前写过一篇文章，《将 React 应用迁移至 Vite》介绍了 Vite 的优势，并且和 webpack 做对比，但 webpack5 有个很重要的功能，就是模块联邦，那么什么是模块联邦？Vite 中也可以实现吗？ 我们一起来探究下。
Vue是一套用于构建用户界面的渐进式框架，与其它大型 JS 框架不同，Vue 被设计为可以自底向上逐层应用，更易上手，还便于与第三方库或既有项目整合，因此，Vue完全能够为复杂的单页应用提供驱动。
那么如何能够方便实现上面功能呢？这种场景就适合使用 Feature Flags，在构建过程中，通过开关的启用和关闭，对构建代码的过程进行动态设置，从而更好的实现 Tree Shaking。
随着对前端功能和性能的不断提高，前端早就不是一段内嵌于页面的一段JS代码了。已经进化为一个系统复杂的工程了。 下面我就结合element3组件库的搭建经验。带大家搭建一个mini版组件库。
框架设计远没有大家想的那么简单，并不是说只把功能开发完成，能用就算完事儿了，这里面还是有很多学问的。比如说，我们的框架应该给用户提供哪些构建产物？产物的模块格式如何？当用户没有以预期的方式使用框架时是否应该打印合适的警告信息从而提升更好的开发体验，让用户快速定位问题？开发版本的构建和生产版本的构建有何区别？热跟新（HMR：Hot Module Replacement）需要框架层面的支持才行，我们是否也应该考虑？再有就是当你的框架提供了多个功能，如果用户只需要其中几个功能，那么用户是否可以选择关闭其他功能从而减少资源的打包体积？所有以上这些问题我们都会在本节内容进行讨论。
题目为动态组件，但为了好理解可以叫做远程加载动态组件，后面统一简化称为“远程组件”。
Vite 虽然有提供打包 lib 的能力，也能混入 rollup 的 build options ， 但是还是不够细致的配置,Vite 本身定位更是面向项目工程脚手架。
公众号原文链接：深入vue - 源码目录及构建过程分析 喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」
最近在开发业务项目的时候，产品小姐姐突然来到我身边，然后就对着电脑一顿操作，具体场景大致是这样的。
Rollup 和 Webpack 是目前项目中使用较为广泛的两种打包工具，去年发布的 Vite 中打包所依赖的也是 Rollup；在对界面加载效率要求越来越高的今天，打包工具最终产出的包体积也影响着开发人员对工具的选择，所以对 Tree-shaking 的支持程度和配置的便捷性、有效性就尤为重要了。本文就来简单分析下两者 Tree-shaking 的流程和效果差异。
本文最初发布于 Medium 上 freeCodeCamp 的博客站点，经原作者授权由 InfoQ 中文站翻译并分享。 📷 什么？又有一个打包器（bundler）/ 构建工具？是的——果真如此，演化和创新相结合为我们带来了 Parcel： https://parceljs.org/ 📷 Parcel 有什么特殊之处，为什么值得关注呢？ webpack 要有大量的配置，这样带来的成本就是复杂性——与此相对的，Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。 Parcel 内置了一个开发服务器
随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于react的开源组件库ant-design，material，又比如基于vue的开源组件库elementUI，iView等。
我们知道，Webpack 是使用 loader 转换代码的，而 Vite/Rollup 则是使用插件转换代码，那这两种机制有什么差异呢？我们用 Vue 的转换来说明一下。
ViteConf 2022 于 10 月 11 - 12 日举行。Vue 和 Vite 的作者尤雨溪发表了名为《How Vite Came to Be》的主题演讲。下面就来回顾一下这场演讲，看看 Vite 是如何诞生的！
写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构，并提供内部公有组件库和工具库供团队使用。在查阅大量资料并对比了webpack和rollup的优缺点之后，最终选择rollup来作为打包工具，我们最终要实现通过npm的方式安装我们的组件库和工具库：
前端路由是我们前端开发日常开发中经常碰到的概念，在下在日常使用中知其然也好奇着所以然，因此对 vue-router 的源码进行了一些阅读，也汲取了社区的一些文章优秀的思想，于本文记录总结作为自己思考的输出，本人水平有限，欢迎留言讨论~
rollup在业务中基本很少会有接触到，通常在我们的业务中大部分接触的脚手架，或者自己搭建项目中，我们都是用webpack，无论是vue-cli，还是react-create-app他们都是基于webpack二次封装的脚手架，所以我们对rollup更陌生一点，本文是一篇关于rollup的学习笔记，希望看完在项目中有所思考和帮助。
前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的bundle类模块化构建工具，再到现在的bundleless基于浏览器原生 ES 模块的 snowpack/vite，前端的模块化/构建工具发展到现在已经快 10 年了。
Vue作为当下最流行的渐进式的js框架，其渐进式的思想、虚拟DOM的运用、组件化的开发模式、响应式数据侦听原理值得开发者进行探索学习，其中运用的代码组织的技巧，对平时的开发大有裨益。本系列笔记初步分为8个章节，记录本人源码的阅读过程。
Vue作为当前前端开发中比较重要的框架，在企业级开发中应用十分广泛。目前也是我的主要技术栈之一。在接下来的系列文章中，我将带大家一起探秘Vue.js底层源码。
之前的 webpack 命令加前缀（如："webpack:build"），继续可用
最近这些年，随着React、Vue、Angular三大框架逐渐稳定，前端技术栈的迭代似乎也渐渐缓慢下来。并且随着React 16版本推出 Fiber， Vue 3.0 版本的正式发布，前端三大框架都有了自己的护城河。
在上节中，我们一起了解了如何使用Svelte封装Web Component，从而实现在不同页面间使用电子表格组件。
之所以选择v2.6.11是因为当前项目（腾讯云医）使用uniapp框架（v2.0.1-32920211122003）进行微信小程序开发，uniapp框架提供的vue运行时就是基于v2.6.11进行改造的。
谈及如今欣欣向荣的前端圈，不仅有各类框架百花齐放，如Vue， React， Angular等等，就打包工具而言，发展也是如火如荼，百家争鸣；从早期的王者Browserify, Grunt，到后来赢得宝座的 Gulp， 以及独树一帜的 fis3, 以及下一代打包神器 Rollup ；在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比。在本文要探究的是，当前打包工具绝对霸者 Webpack。 Webpack，当前各大主流框架默认配备的打包方案，对其如何使用，已有较
前言 临近2017的尾声，总是希望来盘点一下这一年中前端的发展。这一年，有一些新技术和新东西产生，同时，前端技术也慢慢的趋于稳固，自成一套体系。如果你喜欢我的文章，欢迎评论，欢迎关注我的github博客~ 正文 我们何处说起？自然是离不开那三驾马车。 三驾马车 自从2015年，react的问世，开始了三驾马车时代的先河。同时，jQuery也逐渐让出了其霸主的地位。后续的，angular开始了大型的改版，似乎想要追逐react的步伐。两种完全不同思路的体现，在前端开发的技术栈中发光发亮。同时，Vue就像一匹
虽然市面上有很多的打包工具，例如 webpack、Rollup 以及 Parcel 等。毫无疑问，通过使用这些工具，在很大程度上改善了前端开发者的游戏体验。 但随着业务变得越来越复杂，我们不得构建比之前更大型的应用。此时，所需要处理的代码量也越来越大。这时候，上面提到的打包工具就开始遇到性能瓶颈，我们可能需要很长的时间才能启动开发服务器，这样一来，开发效率就变得越来越低。 针对这一现状，大佬们又构建了一个打包工具 ，也就是今天文章的主角 - Vite。Vite 旨在利用生态系统中的新进展来解决上面的问题，通过将应用中的 依赖 和 源码 相分开，从而缩减开发服务器的启动时间。
Svelte 是我用过最爽的框架，就算 Vue 和 React 再强大，生态再好，我还是更喜欢 Svelte，因为它开发起来真的很爽。
随着前端生态的繁荣，工具库几乎是高效开发的必需品，lodash/dayjs/numberal等实用的工具库相信大家都用过。
vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。
很早之前使用 webpack 的时候，也有类似的插件，分析打包出来之后的代码，分别是哪些模块比较庞大，针对打包的内容进行优化。说实话，知道归知道，但是没有哪个项目使用分析过。最近刚好看见了两个插件，于是对自己目前在开发的项目跑了一下。
距离 Vant 首次发布刚好过去了半年时间，在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议，持续对组件进行打磨、优化，使得 Vant 逐渐成长为一个轻量、可靠的移动端 Vue 组件库。
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
在根目录新建 pnpm-workspace.yaml 文件; 意思是，将 packages 目录下所有的目录都作为单独的包进行管理。
在 VueJS Amsterdam 2024 大会首日，Vue 创始人 Evan You 进行了开场主旨演讲。他首先回顾了 Vue 十年以来的累累硕果，指出 VueJS 从一个视图层工具，成功演化出全流程的社区生态。
前段时间在利用工作之余开发了tomato timer这个蕃茄钟，然后部署到github.io上，由于greatway太厉害，偶尔会有打不开的情况。上周末对比做了扩展和改进，使其成为chrom
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
