不需要打包的构建工具snowpack和vite

关注 vue3 的人一定关注到尤雨溪的另一个开源项目 vitejs, 它是一个不需打包的构建工具,开发时使用 es module 导入代码,生产环境用 rollup 构建。 它 有一些显著的优势: 使用es module导入代码, 极快的启动速度(ESM) 即时的热模块替换(HMR) 真正的按需编译 目前尤雨溪似乎花费了蛮多精力在这个项目的,目前 vitejs 600左右 commit,vue3 2000左右 commit, 粗略估算工作量前者约后者的 30%,我甚至忍不住想 vue3 的延期会不会跟这个项目有关呢?可见尤大对这个项目的重视。 vitejs 依赖现代浏览器的一个关键特性,即es module imports, 那么市面上有没有类似的工具呢? 答案是有的,vitejs 的 how and why 章节也列了出来,其中最接近的一个就是 snowpack,文档里说道: 两个工具都原生支持基于 ESM 的 HMR。 Vite 先一步支持, snowpack 在 v2 时也支持了。双方在基于 ESM 的 HMR 上合作过,尝试建立统一的 api, 但因为底层不同还是会略微不同。 vite 更加专注,自带更多功能,如 typescript 编译,css 导入, css 模块和 post css 的默然支持。 生产环境打包, vite 使用 rollup, snowpack 使用 parcel/webpack 今天恰巧也关注到 snowpack v2 的发布博客, 在 v1 的目标 在浏览器中直接使用 npm 包外,v2 又增加了对基于 ESM 的 HMR 的原生支持。它有如下特性:...

May 28, 2020 · 1 分钟 · ming

不蒜子计数器研究和jsonp的妙用

最近研究使用 halo 部署个人博客,很常见的一个需求就是网站访问量统计,毕竟每个新站长都想知道自己的网站有多少人访问了。 halo 内置了不蒜子极简网站计数器,简单的添加一个 js 和页面标签,就能获得你网站的访问人数等数据,简单,够用。 那么它是怎么实现的呢,下面我们就来研究一下。 获得源码 不蒜子只需要一个 js 文件,把它拷贝下来,比较简单不到 100 行,直接贴在下面: // http://s.xinac.net/static/busuanzi/v2.3.0/bsz.pure.mini.js var bszCaller, bszTag; !function() { var c, d, e, a = !1, b = []; ready = function(c) { return a || "interactive" === document.readyState || "complete" === document.readyState ? c.call(document) : b.push(function() { return c.call(this) }), this }, d = function() { for (var a = 0, c = b.length; c > a; a++) b[a]....

May 22, 2020 · 5 分钟 · ming