油猴插件是什么？

油猴插件(Tampermonkey) 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Edge, Safari等多个浏览器。油猴脚本本质上是在网页上插入一段 JavaScript(JS) 代码，开发者在代码中编写内容，开发插件。此外，它还提供Userscript Header和Application Programming Interface给开发者，用来实现原生 JS 无法实现的功能。

create-react-app是大家常用的用来创建react项目的脚手架，它的设计理念和实现思路值的我们学习。我研究了一下create-react-app源码，并把它的核心功能模块梳理出来。

下面是这篇文章的主要内容:

1. 简单介绍create-react-app的使用

2. 介绍create-react-app的流程，从全局上看create-react-app是怎么创建react项目的

3. 详细的分析create-react-app的3个核心模块的实现

4. 总结

   阅读全文 »

我在整理npm相关知识时，发现有些问题比较困惑，网上也没有从源码层面解释npm的文章，所以我去看了源码来解决我的困惑。为了加深理解，我把源码里的重点内容整理出来，希望大家在读完后也能够对npm有更深的理解。

一、项目简介：

这篇文件介绍的是油猴插件脚手架Wokoo的开发过程与复盘。Wokoo是我开发的脚手架，用来快速起一个基础项目用于油猴插件的开发。

1. Wokoo的npm地址：wokoo
2. Wokoo的github地址：wokoo (如果觉得不错，请点小星星)
3. Wokoo脚手架开发的油猴插件有：
   • 知乎目录
   • 划词搜索
4. Wokoo使用说明文档 👉 5分钟上手开发浏览器插件——油猴脚手架wokoo(使用篇)
5. 不了解什么是油猴插件？戳这里 👉 Chrome 插件大杀器：「油猴」Tampermonkey 使用详解

在这个项目中我扮演了项目的产品经理，开发主R，运营官 这几个角色。从头到尾负责开发一个开源项目，让我有了满满的成就感。

koa是经常使用的node端框架，它封装了一系列node方法，通过它的api让写服务变得更加方便。而且相比express，koa支持promise写法，更加符合现在的前端代码编写习惯，代码可读性更强。koa相比express更加短小，更多的功能是通过插件的形式实现的，它的设计思路很值得我们参考。

本篇文章将koa的逻辑用流程图表示，让我们理解起来更加简单。

油猴插件 & wokoo 脚手架使用说明

一款油猴插件的脚手架。如果直接开发油猴插件，开发者需要费时搭建 vue 或 react 基础项目，还需要对油猴脚本区域做对应的配置，开发体验差。

wokoo 可以一键式生成基础项目，并且提供基础 Tampermonkey 配置。主要提供的功能有：

• 命令行式创建脚手架初始项目
• 根据用户选择，生成 vue、react 的基本项目
• tampermonkey.js 文件中提供 Tampermonkey 配置

关于油猴插件和 wokoo 的具体使用可以阅读 5 分钟上手开发浏览器插件——油猴脚手架 wokoo

这里是 wokoo 脚手架代码：wokoo 脚手架 github 仓库

我使用 wokoo 开发了MoveSearch（划词搜索插件），欢迎大家使用

概要

cookie

1. 为什么会出现 cookie?

http 是无状态的协议，导致请求不知道是哪个用户操作的。cookie 的出现就是为了解决 http 请求无状态和服务端要知道请求来源之间的矛盾。

cookie 会根据服务端发送的响应报文中的 set-cookie 字段信息，通知客户端保存 cookie。下次客户端发送请求时就会携带 cookie，服务端收到请求，根据 cookie 和服务器的记录进行比对，找到之前的状态。

这篇文章你能够学习到：

1. 快速使用油猴插件进行浏览器插件开发
2. 用 wokoo 脚手架开发 2 个有意思的插件: 划词搜索MoveSearch 和 知乎目录zhihu-helper
3. 有精力的话可以继续学习wokoo 脚手架的搭建。

功能介绍

webpack 中的发布订阅模式是使用 tapable 实现的。tapable 比 node 自带的 evevnEmitter 功能更加强大，表现在 1. 一次发布能触发多个订阅钩子； 2. 事件流种类更多，分为 bail，basic, loop, waterfall。当然，学习难度也更高。我开发这个工具的目的是想将 tabable 代码转换成流程图，更直观的了解对应的 tabable 执行流程。

词法分析和语法分析是代码中非常底层的知识，在代码的编译、构建的过程中扮演了重要的角色。
词法分析是指把代码片段逐个单词的读取，根据分词规则转化成一个个 token。每个 token 有对这段单词的类型和内容进行描述。最后将这些 token 收集成 tokens 返回回来。目前常用的 jsx 词法解析器是esprima 。

为了掌握 jsx 词法解析，我也实现了简易版的 jsx 词法解析器。

代码仓库：jsx-tokenizer

npm: jsx-tokenizer