官网资料 构建生产版本--库模式 https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的. vite 的库项目可以分

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢迎Star) 官方交流:添加DevUI小助手(devui-official) DevUIHelper插件:DevUIHelper-LSP(欢迎Star) 前言 随着前端生态的繁荣,工具库几乎是高效开发的必需品,lodash/dayjs/numberal等实用的工具库相信大家都用过. 我近期在开发Ca

上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出. 需求 事情是这个样子的.我有一个这样的需求,或者是我发现有这么一个需求.就是有时候吧,我也不想搞的那么复杂,我就想写一个简简单单的demo,引入一个JS脚本,CTRL + S一按,浏览器一打开,啪的一下,我就能看见效果,我就能爽起来,我不想npm init .npm install这种去搞一个规范的工程,我就想回到远古时代,感受最纯真的爱.再比如后端的同学或者测试的同学,我不想知道npm是什么,我也不想去

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

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

学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点: webpack支持在项目中使用对项目进行打包,webpack的核心功能包括 code-splitting(按需加载js)和 static assets(资源文件处理). rollup 适合使用在独立的js库中进行打包.但是目前还不支持 code-splitting 和 热更新,更趋向专注于构建分

打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类似fundebug) 听起来高大上的SDK,其实就是一个JS文件,类似平时开发中我们引入的第三方库: const moment = require('moment'); moment().format(); 小程序的模块化采用了Commonjs规范.也就是说,我需要提供一个monitor.js文件,

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

背景   目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML 页面构建技术,但业务逻辑基本无法复用.  近半年做过几个小型 Web 页面,在不断学习前端知识的同时,也在重构并摸索小型 Web 项目可能的更好解决方案.本文则对之前的工作进行一次整体描述.   目标和定位   单论小型 Web 页面,其相对于 Vue/React 等项目最大不同是不需要支持 SPA

Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了常见的一些方法中,部分使用之后就看到了很大改善,部分没什么明显的变化,也可能是项目规模还不够大,先记录一下方法也好 一.使用监听模式或热更新热替换 webpack支持监听模式,此时需要重新编译时就可以进行增量构建,增量构建是很快的,基本不到一秒或几秒之内就能重新编译好 注意区分一下开发环境和线上环境

音乐分享: B.o.B Ft. Marko Penn - <Roll up> —————————————————————————————————————————————————————————————— 项目截图: 项目目录: 目录介绍: |---dist ------------------------最后文件目录 |----└──i------------------------图片目录 |----└──j------------------------最后Rollup.js的生成的js目

前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况.上周末对比做了扩展和改进,使其成为chrome的插件,或者成为桌面app. chrome插件的使用与开发 一.如何安装与使用: 1.下载tomato timer项目,github地址 https://github.com/cqhaibin/tomato-timer.git 2.切换到V2.0.0.0的tag,然后如下图所配置: 3.然后单击 “小飞”图

这里讲讲,angular2在生产模式下用webpack2进行打包的方法: //使用rollup打包还是比较坑的,功能及插件上都不如webpack, 关键不支持代码分离,导致angular里的lazy loader将无法使用. 具体步骤: angular=>aot=>webpack(Tree shaking&& Uglify) angular=>aot: 首先你需要的依赖: "@angular/compiler"     "@angular/c

在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块系统,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独立的文件.该文件内部的所有

本文也是多次学习webapck积累下来的知识点,一直在云笔记里. webpack的原理 webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去. 在解析文件递归的过

  Vue本质是上来说是一个函数,在其通过new关键字构造调用时,会完成一系列初始化过程.通过Vue框架进行开发,基本上是通过向Vue函数中传入不同的参数选项来完成的.参数选项往往需要加以合并,主要有两种情况: 1.Vue函数本身拥有一些静态属性,在实例化时开发者会传入同名的属性. 2.在使用继承的方式使用Vue时,需要将父类和子类上同名属性加以合并.   Vue函数定义在 /src/core/instance/index.js中. function Vue (options) { if (pr

Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以先看下Flow的语法 官方文档 目录结构 vue.js源码主要在src下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared

在日常工作中,经常会碰到一些问题,比如数字金额要写成千分位形式(1234 -> 123,4.00).要写成汉字大写形式(123 -> 壹佰贰拾叁圆),又比如要进行 cookie 读写操作,这些问题都比较常见,但是好多常用的工具库都没有,只能去网上找 snippets,感觉很不爽啊.所以我就诞生了一个想法,写一个自己的开源工具库! 说到做到,一两周时间我把基本结构搭起来了,并且放在了 GitHub,现在还只实现了部分功能,还有很多的功能要实现.一个人的力量总是有限的,所以我想在掘金吸引一波关注,

目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global

最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 我这里打算参考http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/来学习,所以使用2.1.7版本 3.执行npm install 4.执行npm run dev,到这里问题来了,这些问题在下文第二部分详细写,这里先