「前端」 分类

编译 Vue 单文件组件至 JS 文件

在开发 Vue 的组件库时,该如何将 vue 文件转换为 commonjs 或是 ES Module 规范的 js 文件,最后提供给他方使用?

在这样的场景下,展开标题内容的研究与实践。

也许有用的 Web 调试技能

记录那些年,我们都在用的调试方法。第一部分主要是一些 Chrome 开发者工具的使用记录;剩余部分是一些其他的调试手段,包括移动端调试、代理内容的介绍。了解 Chrome 开发者的同学,可以跳过第一部分。

谷歌娘

TypeScript 之嵌套数组与深度可选类型

嵌套数组类型

以下类型可用于描述嵌套的数组类型。

微信网页开发踩坑记录

如标题所示,本文用于记录在微信中开发页面时所遇到的坑。

Next.js、GraphQL 使用小结

近段时间里使用 Next.js 搭建了两个后台,同时还使用了 GraphQL。期间匆匆忙忙,而且项目都是另一个前端老哥搭建的。所以,自己又抽空从头开始搭建了几个 demo,回顾一下知识,同时整理了一下当时遇见的问题、梳理下其中缘由。

本文主要内容包括三个 demo 的介绍,并记录一些在开发过程中遇到的问题和解决,本文对应 Next.js 版本为 v8.0.3。写的时候发现 Next.js 升级到 v9.0.0 了,自带 TypeScript 支持了,果断把 demo 的版本也升级了。

上一篇文章(《{% post_link get-a-ssr-demo-step-by-step %}》)介绍了从零搭建 SSR 的过程,并且附带了一些问题的讲解,推荐结合阅读。

那么,按照惯例就先呈上 demo 地址:react-ssr

从零搭建 SSR

在上一季度中接触并使用了 Next.js,实践了一把 SSR。期间遇见了不少问题,详情可见:{% post_link use-summary-of-next-js-and-graphql %}。

实际上是打算先写那篇文章,但这里还是来写这个了,这样能先从零开始认识 SSR。

先放上 demo 地址:https://github.com/daief/react-ssr/tree/master/packages/express-ssr-demo

用 TypeScript 来写 Vue!

本文不说明 webpack 的配置,简单介绍如何使用 TypeScript 来书写 Vue,阅读本文应同时对 TypeScript 和 Vue 有一定的了解。

初识 AST

在计算机科学中,抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。

Babel、UglifyJS2、ESLint、Webpack、TypeScript 等我们熟知的工具都包含 AST 的应用,实现了强大的功能。本文主要记录学习、应用 AST 的过程,主要内容:1. 解读 react-hot-loader dev 环境下的 Babel 插件;2. 编写对应的 TypeScript transformer 尽可能实现相同的功能。

记一次单页应用的加载优化

如今的前端页面越来越丰富了,承载着各种功能。而随之增长的则是相应的代码量,加上三方 SDK 的接入以及单页应用(SPA)的特性,一次页面访问会出现慢的感觉,是时候来关注页面的加载优化了。

本文简略描述关于 React 单页应用的加载优化,下文所指加载一般包括下载、执行两个步骤。

将并发的异步操作转化为串行执行

情景还原:有一个用 Promise 封装的异步操作,用于 JS 与客户端交互以获取数据,但当出现并发调用获取数据的时候发现只有其中的一次操作有回调,而剩余的调用就像丢失了一样、后续的步骤(then)也得不到执行。实际上有多种解决方式,这里考虑将这些并发的调用转化为串行执行来确保每次的调用接收到回调。虽然感觉这样做可能意义不是很大,但感觉颇有意思。