「前端」 分类

TS transformer 的使用

TS transformer 简单来讲就像babel 插件一样,只不过作用于 TypeScript 的编译过程。

与 babel 插件不同的是,配置 transformer 的时候会有 beforeafterafterDeclarations 这三种选项,如果不清楚他们之前的区别的话,使用的时候会充满困惑。

本文只关注 transformer 的使用,对应的 demo 仓库:https://github.com/daief/usage-of-ts-transformer

自定义 webpack loader 来实现简单的站点生成器

本篇内容实际上在公司内部分享时有过讲解,通过编写一个自定义的 webpack loader,实现方便快速地构建一个文档类型的网站。现在重新实现了一下,并将这个部分的内容与 jugg 进行了结合,故自己再次整理一遍。

编译 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 尽可能实现相同的功能。