coding house

Next Generation Frontend Tooling概述最近Vite可能算是比较火的一个话题，尤其是随着2.0版本的正式发布之后，各个公众号都在头部推荐，似乎是可以给前端童鞋开发效率带来巨大变革的样子，因此今天抽时间撸一遍看看，毕竟还是要紧跟时代潮流的。Why Vite官方文档开头第一部分就是介绍为什么要有Vite这个工具，其实这也是大家关心的点，前端构建编译工具经过几年的发展从最开始的gulp、grunt一直到现在的webpack，看起来现在已经是webpack一家独大的局面了，..

命令行工具的开发应该是每个前端工程师必备的技能，但是有很多同学刚开始学习时不知道如何入手，今天就来简单介绍一下如何用commander来开发命令行工具。初始化首先cd进入某个文件夹，运行npm init，根据提示信息来生成package.json文件；之后在同级目录下创建bin/test1.js文件；接着在package.json中增加bin字段："bin": { "test1": "./bin/test1.js" },我们在写命令行工具的时候，需要指定一个可执行文.

npm 脚本有一个非常强大的功能，就是可以使用 npm 的内部变量：通过npm_package_前缀，npm脚本可以拿到package.json里面的字段； console.log(process.env.npm_package_name); // package.json内的name字段 console.log(process.env.npm_package_version); // 1.2.5repository字段的type属性，可以通过npm_package_repos.

本文主要来实现实现一个从gitlab拉取项目模板的可交互命令行工具，旨在让大家来理解开发一个交互式命令行工具的整个流程。创建项目首先当然是npm init node-cli-demo -y 直接创建出一个空白项目，之后修改package.json文件，之后创建src和bin文件夹，之后目录结构如下图所示：npm init node-cli-demo -ypackage.json"scripts": { "convert": "babel src --out-dir ./bin/..

介绍使用pixi去开发一个稍微复杂的项目的时候就会涉及到各种类型的图片加载成为纹理，之后GPU去渲染，但是在图片数量较多但尺寸较小时，分开去加载还是比较消耗性能的，因为浏览器的并行下载都是有限制的，下载图片的时候可能就会影响到首页的接口请求速度以及其他更重要的UI渲染速度，因此建议当首次加载有此类情况的时候最好去使用图集的方式来实现。如何实现纹理图集的实现分为雪碧图的制作导出、场景内加载两部分，接下来分开介绍：雪碧图的制作导出：雪碧图的制作需要用到TexturePacker(免费版本就可以满足.

刚开始使用babel的时候，很多童鞋只是单纯跟着官网或则其他人的代码去安装一大堆bbabel相关的npm包，但是并不知道具体每个包都是什么样的作用，本文就是来阐述日常开发时用到的babel全家桶分别的作用、使用场景以及其原理。什么是babel首先来看一下babel是什么？Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of Ja.

ES6-Promise[TOC] 本文用来记录一下学习ES6的promise对象，方便用的时候直接找到。-promise含义 - promise基本用法 - promise基本用法实例 - promise APIpromise含义 ES6原生提供了promise对象，该对象就是一容器，内部包含有未来某个时间结束的动作。promise基本用法ES6 规定，Promise对象是一个构造函数，用