前戏 我是16年入了前端的坑,17年知道了gulp和rollup这两个玩意儿.由于那时webpack势头很猛,便一直没有正眼瞧过它一眼. 直到20年进了一家小公司,做了很多类似的小项目,相同的代码拷来拷去,出现一个bug一堆项目都要改,实在恶心到我了. 于是不得不开始考虑将一些公共的方法和组件提取出来,做成一个第三方库来维护.而在库的封装方面,rollup相对于webpack具有一定的优势. 在此,便和大家分享一下如何自己造轮子,封装一个前端库并发布到npm仓库中去. 源码 这是我自己封装的3个

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 关于 Gulp 就不过多啰嗦了.常用的 js 模块打包工具主要有 webpack.rollup 和 browserify 三个,Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码.因此,Gulp 构建 ES6 开发环境的方案有很多,例如:webpack-stream.rollup-stream .browserify等,本文讲述使用 gulp-better-rollup

前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前端开发一个更深层次的见解 PS:这不是单一的APP应用,这是一个可以快速批量制作app的一套跨平台解决方案 因为我经常在家同步更新,所以在git上放了一份,并非开源,仅参考学习,请勿乱传播,谢谢配合(当然,没有API,没有文档,估计ES6看起来也够呛)呵呵 定位 开始我们先了解下目前前端的三个大的方

转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,所以,我们将在下文中介绍 2019 年 React 学习路线图,希望给想学 React 的开发者一些借鉴. 这就是 2018 年的 React 路线图.它非常全面,2018 年剩下的时间可能不够你学会所有这些,但不要担心,所有的技术在 2

作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们将在下文中介绍 2019 年 React 学习路线图,希望给想学 React 的开发者一些借鉴. 下图是2018 年的 React 路线图,它非常全面,2018 年剩下的时间可能不够你学会所有这些,但不要担心,所有的技术在 2019 年仍然有效.   图片来源: https://github.com

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vitejs-front-end-build-tool-introduction/ 时下大热的vue框架又来了新开发环境构建工具--Vite,今天我们一起来了解一下这个新成员. 背景与工作方式 在过去Webpack.Rollup 等构建工具作为主场明星时,我们的代码都是基于ES Module 规范去写的.一个巨大的依赖图能够通过import 和

很高兴你能在浮躁的年代里还有兴趣阅读源代码,CesiumJS 至今已有十年以上,代码量也积累了三十多万行(未压缩状态). 我也很荣幸自己的文章能被读者看到,如果对你有帮助.有启发,点个赞就是对我最大的鼓励,感激不尽.本系列文章写于 2022 年,梳理的是 CesiumJS 前端库中的主要源码结构,不涉及着色器原理.WebGL 效果原理剖析等内容较为专一.可以独立出文的内容. 如果想看文章目录,直接拉到本文最后一节即可. 目录 1. 源代码工程目录详解 前置说明 ① 根目录下 ② Source 目

之前翻译过一篇文章,介绍了通过 ES2015 的解构赋值语法引入模块,可以让打包工具(browserify)最终编译出来的代码量最小化. 殊不知在 webpack 1.X 版本是无法利用该特性来避免引入冗余模块代码的,导致打出来的 bundle 文件大小难免略有臃肿. 今天则向大家介绍一个当红炸子鸡——Rollup.js,通过它可以让你的 bundle 最小化,有效减少文件请求大小——以至于连 vue 都迅速地转投它来打包模块. Tree-shaking 在 Rollup 编译模块的过程中,通过

近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案.思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程化解决方案. 多余的话不说,本人按照效果图介绍下自己的拙建,强烈希望各位给予建议和指正. 说明: 标题:一个普通的vue组件,利用requirejs加载完成. 二级菜单:测试vue-route动态注入路由的能力 业务组件:测试和模块rollup编译后vue实现的子系统的接入(按需加载). 源码:gi

.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6rem !important;} 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(

深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 五:添加插件来替代环境变量 六:添加 UglifyJS来压缩我们js的代码 七:监听文件变化的插件 --- rollup-watch 八:开启本地服务的插件 --- rollup-plugin-serve 九:实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运

关于Rollup rollup是一款用来es6模块打包代码的构建工具(支持css和js打包).当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用. 它的优点有如下: 能组合我们的脚本文件. 移除未使用的代码(仅仅使用ES6语法中). 在浏览器中支持使用 Node modules. 压缩文件代码使文件大小尽可能最小化. Rollup最主要的优点是它是基于ES2015模块的,相比于webpack或Browserify所使用的CommonJS模块更加有效率,

Webpack vs Gulp 谁会被拍死在沙滩上   本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 前端开发就是在不断的 123..123..123.... 循环

理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 前端开发就是在不断的 123..123..123.... 循环中进行的,上面的后两步(也就是 2 和 3)应该是 自动化 的,前端开发者理应只需关注第 1 步——写业务逻辑代码. 自动化的事情应该交由构建工具来做,时下流行的前端构建工具有 gulp 和 webpack(有人说 webpack 不算是

概述(Overview) Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序.Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD.ES6 模块可以使你自由.无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码.ES6 模块最终还是要由浏览器原生实现,但当前 Rollup

前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了.其实并没有,只不过它从台前退居到了幕后.我们仍然可以在很多项目中看到它的身影,比如elementplus.vant等.现在gulp更多的是做流程化的控制. 比如我们要把一个大象放进冰箱里就需要 打开冰箱门->把大象放进冰箱->关上冰箱门,这就是一个简单的流程,使用gulp就可以规定这些流程,将这个流程自动化,并自动执行这个流程. 所以我们可以使用它在项目开发过程中自动执行常见任务.比如打包一个组件库,

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gul

相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三) 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四) 一.准备工作 1.什么是 npm? npm 是 nodejs 的包管理工具,主要功能就是管理.更新.搜索.发布node的包.Gulp 就是通过 NPM 安装的.关于 NP

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html 相关连接导航 在windows下安装gulp —— 基于