分类目录归档:Node.js

在项目中使用 Dead Simple LESS CSS Watch Compiler 来自动生成 css 文件

最近在写一个 WordPress 主题来帮助我完成从 WordPress 到微信公众号的实现。在这个过程中,我需要借助于一些 CSS 的超集,来帮助我完成样式的编写。考虑到 SCSS 的 C++ 依赖问题,我选择了 Less 来完成。但如果直接使用 lessc 的话,主要面临的问题在于无法检测文件更新,这样对于需要实时查看效果的我来说,是比较麻烦的。所以我选择使用 Dead Simple LESS CSS Watch Compiler 来完成自动监控文件变化并刷新的功能。

教程

安装

执行 npm 命令来安装 Dead Simple LESS CSS Watch Compiler

yarn global add less less-watch-compiler 

安装完成后,你就可以执行命令来监听文件的变化。

配置

这里为了方便,我在 WordPress 插件目录中初始化了 npm, 因此,可以非常方便的借助于 npm script 来完成命令的配置。

通过配置了单独的 Build 命令,实现了执行 npm run build 就会自动监听 less 文件夹下的文件,并转换成对应的 css 文件,放置在 css 目录中。

{
  "private": true,
  "scripts": {
    "build": "less-watch-compiler ./less ./css"
  },
  "devDependencies": {
    "less": "^4.1.2",
    "less-watch-compiler": "^1.16.3"
  }
}

其他

如果你需要对 less 运行有更多配置的诉求,还可以创建一个 less-watch-compiler.config.json 来配置具体的执行目录。不过我对于这部分没有要求,就直接整个目录来进行配置了。

{
    "watchFolder": "<input_folder>",   
    "outputFolder": "<output_folder>",
    "mainFile": "<main-file>",   
    "includeHidden": false,
    "sourceMap": false,
    "plugins": "plugin1,plugin2",
    "lessArgs": "option1=1,option2=2",
    "runOnce": false,
    "enableJs": true
}

总结

SCSS 因为 node-scss 的编译问题被各种吐槽,虽然换成了 dart-scss ,但历史的阴影还在。选择了 less 后,通过一些配置,可以让我自己的开发变得更加简单。何乐而不为?

在 Pug 中实现类似 get_sidebar() 全局方法

在开发 WordPress 主题时,我们会用到一些全局方法,来帮助我们快速加载特定的区域的代码。如果我们在设计和开发主题的时候,也可以实现类似的功能,则在开发对应的页面和应用的时候,我们就可以根据自己的需求来进行特定区域的代码的封装。这样我们在进行后续的开发的时候,就可以简化自己的代码,同时还可以按照 WordPress 的规范提前拆分代码,在实际进行项目开发的时候,提升效率。

原理

本次实现主要是基于 Pug 自带的 Mixins 机制来实现在主题中提供自定义的函数,从而实现我们想要的内容。在原理上,和 WordPress 的 get_sidebar 之类的方法不完全一样。所以,在体验上还没有做到像 WordPress 那么方便。

实现方式

1. 创建 Mixins

在项目的根目录下创建一个 mixins 目录,并在其中创建一个 includes.pug 文件和一个 getHeader.pug 文件。

includes.pug 文件中添加如下代码

include getHeader

getHeader.pug 文件中添加如下代码

mixin getHeader
    p header

2. 引入 includes.pug

在你的 layouts.pug 文件中加入 includes.pug 的引入。需要注意的是,要加在 doctype 之前。

include ../mixins/includes
doctype html
html
  head

3. 在需要的地方调用

当你完成上述的配置后,即可在需要的地方进行调用。

extends layout

block content
  +getHeader
  h1= title
  p hi to #{title}

调用的效果如下:

如果你希望实现更加强大的功能(比如参数),可以参考 Pug 官网的 Mixins 页面。

为 Express 项目添加文件变更自动刷新

我最近在准备开发新的 WordPress 的主题的工具,为了方便自己开发主题,正在准备一个脚手架,本文是开发过程中的经验总结。

白宦成

在进行主题开发的时候,一个很好的体验是来自于变更能够实时生效。过去我们想要实现这样的功能需要自己手动刷新浏览器。但随着前端技术的进步,我们可以借助诸如 browser-sync 这样的工具来完成自动的刷新,从而实现无需手动刷新,代码修改后自动刷新。此外,除了 browser-sync, 你还可以选择 webpack-dev-server

原理分析

此类工具的工作模式是比较简单的,一般而言,会要求你设定一个代理的端口,他会将对应端口的请求进行转发,并在其中加入 BrowserSync 的 JS 文件,从而实现可以无需手动操作来刷新。

browser-sync-client.js

而其刷新的能力则是源自于 BrowserSync 本地提供的 WebSocket Server。嵌入的 JS 文件中加入了 WebSocket 的相关链接代码, 从而实现从 Command Line 当中获取刷新指令,前端则在获取到指令后进行刷新。

WebSocket 请求

具体步骤

1. 安装 BrowserSync

首先在项目中引入 browser-sync ,执行如下命令

npm install browser-sync --save-dev

2. 修改启动文件

我是使用 express generator 生成的项目,需要修改 bin/www 文件,如果你是自己建设的项目,则需要自行修改。

在启动文件中找到监听端口的代码, 并在其回调函数中添加如下代码

# 添加前
server.listen(port)
# 添加后
var bs = require('browser-sync').create();
server.listen(port, () => { 
  bs.init({
    open: false,
    ui: false,
    notify: false,
    proxy: 'localhost:' + port,
    files: ['./views/**', './routes/**'],
    port: 8080
  });
});

上述配置中,可以根据你的需要修改 proxy 、files、port 等选项,实现自定义配置。

关于配置的更多信息,你可以参考 https://browsersync.io/docs/options

3. 启动服务,并测试

在命令行中执行 npm start ,在浏览器中打开对应的页面,当可以看到内容后,可以修改文件,等待页面的自动刷新,如果成功刷新了,则表示你已经完成了相关能力的配置。

Jest 如何将复杂的判断条件中的具体问题暴露出来?

在写测试的时候,如果你需要对大量的数据进行 compare 处理的时候,你大概率不会把所有需要对比的对象都列出来,而是选择直接循环处理。

在测试中如果有循环处理的时候,很有可能会出现的一个问题是你可能无法在测试无法通过时快速定位道具体是循环中的哪一个元素出现的问题。这个时候的定位就会比较麻烦。

一个比较好的办法是,可以在 Jest 中加入 try/catch 中来处理错误,这样可以在出现错误的时候,打印一些辅助信息来快速定位,比如

it('test-error-catch-example',() => {

   let needTestData = [1,2,3,4]

   needTestData.foreach( item => {
       let result = doSomething(item)
       // 这里开始是新增的
       try{
          expect(result).toBe(true)
       }catch(e){
          console.log("error key",item)
          throw e;
       }
       // 新增的错误处理结束
   })

})

通过添加一个自定义的 try catch ,可以在出现问题的时候,一方面将 Error 按照常规的方式抛出,等待 Jest 处理,另一方面,可以在 catch 时输出自定义的信息,方便我们进行排查和修复。

Vite 添加 alias

如果你希望简化你的 import 引用,可以通过在 Vite 中配置 alias ,来简化你的 import 引用。

只需要定义 reslove.alias 属性即可配置。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
            '@c': path.resolve(__dirname, './src/components'),
        },
    }
})

参考地址:https://cn.vitejs.dev/config/#resolve-alias

black and white penguin toy

如何使用 GitHub Action 自动发布 NPM

我经常会用 GitHub 来存储我的代码,其中很大一类是各种 npm 包。

由于本地常年配置了 npm 的 mirror,我更喜欢使用 GitHub 自动发布。

有了这个配置,我只需要编写完代码后,并执行如下命令,即可实现自动发布包.

npm version patch
git push --all
git push --tags

以下是对应的 GitHub action file。

使用时需要配置 npm_token 为你自己的 NPM Token。这个 Token 可以在 NPM 后台获取到。

name: Node.js Package
on:
  push:
    tags:
    - "*"
jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
Hello World text

彩云翻译 API 丢失换行的问题

在使用彩云翻译的 API 进行应用开发的时候,遇见了一个很尴尬的问题,提交上去的内容会丢失换行。

示意图

于是给彩云翻译的邮箱发了一封邮件,一天后,我就收到了官方人员的微信好友邀请(因为我的微信写在邮件的footer)。

经过一番沟通后了解到,目前彩云翻译的 API 会默认移除换行符 & HTML 标签,因此,在开发时,暂时还需要自行对文本进行切割,提取其中的文本内容,按段进行翻译,解决这个问题。

不过,官方也在反馈,会评估提供翻译 HTML 文档的能力,期待一下吧。

orange pink keyboard

发布 NPM 包时,遭遇 You should bug the author to publish it (or use the name yourself!) 怎么办?

在发布一个 NPM 包时,我遭遇了这样的一个问题:

You should bug the author to publish it (or use the name yourself!)

经过查询后发现,是因为我之前使用的 Login Token 失效了,在这种情况下,只需要重新执行npm adduser添加用户,即可解决问题。


我之前以为是 login 没用,要 adduser 才能使用,后来查询了一下 npm 的文档发现 login 是 adduser 的一个别名,二者功能是一样的,因此,不存在 login 的权限不如 adduser 的问题。

orange pink keyboard

如何控制发布到 NPM 中的文件?

如果你使用 Typescript 编写 npm 包,可能会发现自己编写的 ts 文件也被发布到了 NPM 上去。

一般来说,这个其实并没有什么,除非你的包并不开源,又或者你有精神洁癖,希望用户看到的包的文件目录是足够简单明了的。

这个时候,你可以借助 npm 中的 files 这个字段,来控制你需要上传的文件。

比如,如果你按照下面的方式配置 files 就可以控制你的包在发布时,只发布有限的文件,比如必须的 package.jsonLICENSEREADME 以及构建产物 dist 文件夹。

{
   "name":"your-package",
   "files":[
     "package.json",
     "README.md",
     "LICENSE",
     "dist"
   ]
}
text

如何解决 JavaScript 中 RegExp 不幂等的问题?

在对 WXMarkdown 进行改造的时候,我准备使用 Vercel 提供的 cloudFunction 来实现。

在执行时,出现了一个奇怪的问题,当我使用 RegExp 进行匹配的时候,会出现匹配成功和匹配失败的情况。

当我回溯代码时,发现问题出现在

import type { NextApiRequest, NextApiResponse } from "next";
const URL = require("url");
const rule = /BV([0-9a-zA-Z]{1,10})/g;
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<MDResponse>
) {
    const { url } = req.body;
    const result = rule.exec(url);
}

result 的匹配结果不是每次都是可用的,会交替一次 null,一次有结果。

搜索后了解到,这是由于 RegExp 本身是具有状态的,在这种情况下,由于后一次的调用复用了之前的请求,所以出现了一次有结果,一次没有结果。

在这种情况下,有两种解决方案:

  1. 在使用 Rule 之前,对其进行重置状态,即在进行匹配之前,先设定 rule.lastIndex 为 0
  2. 另一种解决方案是将 rule 的定义放置在导出的函数内部,这样就可以在后续执行的过程中,重新初始化。

Reference

https://stackoverflow.com/questions/38910334/regular-expression-exec-function-does-not-work-multiple-times