子咻
description --- when I use webpack v4 in this way: ```js const serverCompiler = webpack(serverConfig) const MFS = require('memory-fs') const mfs = new MFS() serverCompiler.outputFileSystem = mfs ``` and show...
# 前言 npm 自从v7开始，引入了一个十分强大的功能，那就是`workspaces`。另外，yarn和pnpm也拥有`workspaces`的能力。不过，从用法上来说，几乎是一模一样的。所以，学会了npm workspaces的话，自然而然也就学会了yarn和pnpm的了。 # 概览 本文会分四个部分进行介绍： 1. 什么是workspaces； 2. 多包管理； 3. 多项目管理； 4. 避坑； 5. 总结； # 什么是workspaces？ 顾名思义，workspaces就是多空间的概念，在npm中可以理解为多包。它的初衷是为了用来进行多包管理的，它可以让多个npm包在同一个项目中进行开发和管理变得非常方便： - 它会将子包中所有的依赖包都提升到根目录中进行安装，提升包安装的速度； - 它初始化后会自动将子包之间的依赖进行关联（软链接）； - 因为同一个项目的关系，从而可以让各个子包共享一些流程，比如：eslint、stylelint、git hooks、publish flow等； 这个设计模式最初来自于Lerna，但Lerna对于多包管理，有着更强的能力，而且最新版的Lerna可以完全兼容npm或yarn的workspaces模式。不过因为本文讲的是workspaces，所以，对于Lerna有兴趣的同学，可以自行去[Lerna官网](https://lerna.js.org/)学习。...
前言 --- 接触canvas应该是在去年半次元做制品计划吧，想想也好久了，不过，那会儿每天累得和狗一样，周末还要上课。经验总结也基本都记录在OneNote，思维跳跃性的记录也就不适合作为博客发布。 现在来了新公司，一段时间忙，一段时间闲成狗，所以就会再重新总结，写写博客。 canvas简介 --- >引用自MDN： 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。 我认为canvas最好的教程就是MDN的，[canvas基础补充请戳这里>>](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) canvas绘制图片——drawImage --- 我们可以将已经加载好的图片画到canvas上。 绘制图片的api接口： `drawImage(image, x, y, width, height)` 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标...
前言 --- 首先，先说明下该文章是译文，原文出自[《AST for JavaScript developers》](https://itnext.io/ast-for-javascript-developers-3e79aeb08343)。很少花时间特地翻译一篇文章，咬文嚼字是件很累的事情，实在是这篇写的太棒了，所以忍不住想和大家一起分享。 OK，我们直接进入正题。 为什么要谈AST（抽象语法树）? --- 如果你查看目前任何主流的项目中的`devDependencies`，会发现前些年的不计其数的插件诞生。我们归纳一下有：javascript转译、代码压缩、css预处理器、elint、pretiier，等。有很多js模块我们不会在生产环境用到，但是它们在我们的开发过程中充当着重要的角色。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上。  所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上 我们定一个小目标，从解释什么是AST开始，然后到怎么从一般代码开始去构建它。我们将简单地接触在AST处理基础上，一些最流行的使用例子和工具。并且，我计划谈下我的js2flowchart项目，它是一个不错的利用AST的demo。OK，让我们开始吧。  什么是AST（抽象语法树）？ >It is a hierarchical program representation that presents source code structure according to the grammar...
模块化目的 --- 1. 避免命名冲突； 2. 依赖处理； 分类 --- - AMD - CMD - Commonjs - ES module - brower（为了方便，后文用ES6-import-browser替代） - webpack（为了方便，后文用ES6-import-webpack替代） - node（为了方便，后文用ES6-import-node替代） - UMD AMD --- ### 定义 [amdjs...
前言 --- 记得前两年，`nightmare`还是很火的。所以，我在自己的前端脚手架也集成了它。不过，过去了那么久，不知道现在的形式如何。 因为最近发现面向的跨境项目业务越来越复杂，每个组员都负责着多个项目，一下做做A，一下做做B，然后有档期就会被安排做做跨境。因此，因为注意力不能集中，再加上对业务的不了解，就时不时会写一些影响到以前逻辑的bug。 这不得不让我们去规划做自动化回归测试的事情，虽然网站业务繁琐，但至少得保证每次组员的修改，不会影响主流程。 罗列 --- 首先，我先罗列出我调研的e2e框架或库，让大家有个大体的认识。 1. **[PhantomJS](https://github.com/ariya/phantomjs)** 英文解释： Scriptable headless browser. 中文解释： 可编程无界面浏览器。 补充： 它就是一个浏览器，只是内部的点击、翻页等人为相关操作需要程序设计实现。 --- 2. **[NightmareJS](https://github.com/segmentio/nightmare)** 英文解释： A high-level browser automation library. Under the covers...
前言 --- 有时候，市面上的webpack loader并不完全符合我们的需求，所以，我们不得不自己从0开始写一个，或者是在别人写的loader基础之上进行修改。 无论哪种，都需要我们对webpack加载loader的方式有所了解。 实现 --- 出招吧~ ### 在github上创建项目 ### 创建本地项目 1、git clone项目到本地 2、初始化npm ```shell npm init ``` 填写完npm init的一路提示下来以后，我们看下文件结构： ```shell . ├── README.md └── package.json ``` 3、安装webpack ```shell...
前言 --- 去年在公司内部做了一次canvas的分享，或者说canvas总结会更为贴切，但由于一直都因为公事或者私事，一直没有把东西总结成文章分享给大家，实在抱歉~ 分享这篇文章的目的是为了让同学们对canvas有一个全面的认识，废话不多说，开拔！ 介绍 --- Canvas是一个可以使用脚本（通常为Javascript，其它比如 Java Applets or JavaFX/JavaFX Script）来绘制图形，默认大小为300像素×150像素的HTML元素。 ``` html ``` 小试牛刀 --- ``` html const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.fillStyle = 'purple'...
Foreword --- 不知道有没有同学和我一样，在网上看https的资料总是觉得好像讲的不详细或者经不起推敲，甚至在书本中，也看的云里雾里，稍微到了关键的地方，就被跳过不介绍了。自己好像懂了，诶，好像又没懂。 反正我当初是憋了好一段时间 (〒︿〒) 因此，为了避免新手别像本王一样走弯，本王放弃了看动漫的时间，下定决心写一篇关于https的文章。 What --- https在MDN上的定义： > HTTPS （安全的HTTP）是 HTTP 协议的加密版本。它通常使用 SSL 或者 TLS 来加密客户端和服务器之前所有的通信 。这安全的链接允许客户端与服务器安全地交换敏感的数据，例如网上银行或者在线商城等涉及金钱的操作。 SSL和TLS的区别：  大体上说白了，没什么区别。就是TLS是IETF的标准化，SSL不是，而且会被历史给能慢慢淘汰。 值得一提的是SSL 3.0开始，便引入了[前向安全性](https://zh.wikipedia.org/wiki/%E5%89%8D%E5%90%91%E5%AE%89%E5%85%A8%E6%80%A7)，为了不一开始就让各位困扰，前向安全会在后面介绍。 Why --- 那为什么要是用https呢？ 自然因为安全啦。 那http怎么就不安全了呢？ 接下来就让我们一起来看看吧：...
What --- [koa-mock-swich](https://www.npmjs.com/package/koa-mock-switch)是一个前端mock数据、并可以管理返回数据的server。 Why --- 为什么需要`koa-mock-switch`。 目前开发过程中的mock数据方式，主流来说分为： ### 1.后端mock数据 即，局域环境有一个专门模拟数据用的数据库，然后，后端开发完接口以后，和线上一样地进行增删改查，最后返回给前端数据。 **缺点：** 时间上，前端在需要数据接口的时候，不得不等后端开发完接口以后，才能进行下一步开发。 职责上，即使前端开发页面的效率很高，但是因为最后完成的时间肯定是在后端之后的，如果一个项目进度耽误了，前端的锅是背定了。 ### 2.前端搭建mock数据服务 我们前端，一般都会自己用express或者koa搭建自己的本地前端mock数据服务，市面上也有很多现成的npm可以使用。 **优点:** 前后端并行开发。前后端只需要在开发之前，一起定义好接口规范即可。之后前端按照api文档模拟mock数据，自己可以躲在小黑屋独自开发，直到最后的联调。 通过对比，我们发现前端搭建mock数据服务的方式无疑是前端开发的首选。 但是，对于传统的前端mock服务，我们做的仅仅只有，前端页面发起请求，mock服务接收请求，根据请求路径寻找对应的mock文件，最后返回给前端。 相信大多公司也是这么干的。 ### 那它有什么不足呢？ 考虑一下以下场景： 如果我们想要返回不同的mock数据，开发者不得不手动的修改mock数据源文件，每次注释，解注释。 状态少还可以，比如一个接口，`成功`或`失败`，在界面的显示需要不同，因此，我们就需要写完两组模拟数据，并注释一组比如`失败`，等到需要用`失败`的时候，解注释`失败`，注释`成功`。 如果状态多呢？比如一个用户信息接口，用户分为企业用户和个人用户，然后，企业用户有四种状态：未实名、实名中、已实名、实名失败。默认模拟数据为**企业用户->已实名**，这个时候，我们想要测测所有的情况，那就得做7次注释加解注释的操作。 版本迭代了，已实名还有分：初级会员、中级会员、高级会员、超级会员。我们以后每次改相关代码，为了避免出bug被测试看不起，就不得不所有的情况全都再测一遍。 如果状态更多呢？ 有同学说，我三年的注释解注释工作经验，怕这百把十个操作？我就喜欢每次改完代码就一顿注释解注释操作，让老板看到，我工作是有多么饱和。...