2026年，这7个JS库会成为前端自动化的主流？

传统Node.js启动：
启动项目 → 读取依赖 → 查找依赖位置 → 编译代码 → 运行
总耗时: 8-10秒

Bun启动：
启动项目 → 加载预编译缓存 → 运行
总耗时: 1-2秒

// build.js - 使用Node.js构建脚本

// 第1步：引入webpack工具（这是一个很大的依赖包，100MB+）
const webpack = require('webpack');

// 第2步：读取webpack的配置文件（通常有几百行配置，很复杂）
const config = require('./webpack.config.js');

// 第3步：调用webpack开始打包
webpack(config, (err, stats) => {
if (err) throw err;  // 如果出错就抛出异常
console.log('构建完成');
});

// 实际效果：
// 每次构建: 4分12秒 ← 太慢了！
// 云服务器费用: 每次构建约0.07元
// 一天发5个版本: 0.35元
// 一个月(22个工作日): 7.7元

// build.js - 使用Bun构建脚本（简单多了！）

// Bun.build是Bun自带的打包功能，不需要额外安装webpack
await Bun.build({
entrypoints: ['./src/index.tsx'],  // 入口文件：从哪个文件开始打包
outdir: './dist',                  // 输出目录：打包后的文件放在哪里
minify: true,                      // 压缩代码：让文件更小，加载更快
splitting: true,                   // 代码分割：把大文件拆成小文件，按需加载
});

// 实际效果：
// 每次构建: 52秒 ← 快了4.8倍！
// 云服务器费用: 每次构建约0.015元 ← 省了78%的钱！
// 一天发5个版本: 0.075元
// 一个月(22个工作日): 1.65元

// 对比：
// - 不用装webpack、babel等工具（省了100MB+的依赖）
// - 配置超级简单（只要5行代码）
// - 速度快、省钱、省心

// 传统方式:手写校验逻辑
function validateUser(data) {
if (typeof data.name !== 'string') {
    thrownewError('name必须是字符串');
  }
if (typeof data.age !== 'number' || data.age < 18) {
    thrownewError('age必须是大于18的数字');
  }
// ... 还有20个字段要校验
}

// 问题:
// 1. 代码重复,维护成本高
// 2. 错误信息不够友好
// 3. 没有TypeScript类型推断

import { z } from'zod';

const UserSchema = z.object({
name: z.string().min(1, '姓名不能为空'),
age: z.number().int().min(18, '必须年满18岁'),
email: z.string().email('邮箱格式不正确'),
phone: z.string().regex(/^1[3-9]\d{9}$/, '手机号格式不正确'),
});

// 自动生成TypeScript类型
type User = z.infer<typeof UserSchema>;

// 校验数据
try {
const user = UserSchema.parse(apiResponse);
console.log(user); // 类型安全的user对象
} catch (error) {
console.error(error.errors); // 详细的错误信息
}

外部数据 → Zod检测 → 合格？
                      ├→ 是：通过（类型安全）
                      └→ 否：具体错误信息

import { z } from'zod';

const ProductSchema = z.object({
name: z.string().min(1).max(100),
price: z.number().positive(),
stock: z.number().int().min(0).optional(),
images: z.array(z.string().url()).max(5),
});

// 自动生成TypeScript类型
type Product = z.infer<typeof ProductSchema>;

// 使用
const product = ProductSchema.parse(formData);

const { exec } = require('child_process');

exec('git pull origin main', (error, stdout, stderr) => {
if (error) {
    console.error(`执行错误: ${error}`);
    return;
  }
console.log(`输出: ${stdout}`);
console.error(`错误: ${stderr}`);
});

// 问题:
// 1. 回调地狱,不支持async/await
// 2. 错误处理繁琐
// 3. 输出是Buffer,要手动转字符串
// 4. 不能方便地pipe多个命令

import { execa } from'execa';

// 简洁的Promise API
const { stdout } = await execa('git', ['pull', 'origin', 'main']);
console.log(stdout);

// 管道操作
const { stdout: commitMessage } = await execa('git', ['log', '-1', '--pretty=%B']);
await execa('echo', [commitMessage], { stdout: 'pipe' });

// 错误处理更清晰
try {
await execa('npm', ['test']);
} catch (error) {
console.error('测试失败:', error.message);
console.error('退出码:', error.exitCode);
console.error('错误输出:', error.stderr);
}

// 传统方式（回调地狱）
exec('git pull', (error, stdout, stderr) => {
  if (error) { /* 处理错误 */ }
  // 成功后再嵌套下一个命令...
});

// Execa（清爽）
await execa('git', ['pull']);    // 第一步
await execa('npm', ['install']); // 第二步

import { execa } from'execa';
import ora from'ora'; // 后面会讲到

asyncfunction deploy() {
const spinner = ora('开始部署...').start();

try {
    // 1. 拉取最新代码
    spinner.text = '拉取代码...';
    await execa('git', ['pull', 'origin', 'main']);

    // 2. 安装依赖
    spinner.text = '安装依赖...';
    await execa('bun', ['install']);

    // 3. 构建项目
    spinner.text = '构建项目...';
    const { stdout } = await execa('bun', ['run', 'build']);
    console.log(stdout);

    // 4. 运行测试
    spinner.text = '运行测试...';
    await execa('npm', ['test']);

    // 5. 部署到服务器(通过SSH)
    spinner.text = '上传文件...';
    await execa('scp', ['-r', './dist/*', 'user@server:/var/www/']);

    // 6. 重启服务
    spinner.text = '重启服务...';
    await execa('ssh', ['user@server', 'pm2 restart my-app']);

    spinner.succeed('部署成功!');
  } catch (error) {
    spinner.fail(`部署失败: ${error.message}`);
    console.error('错误详情:', error.stderr);
    process.exit(1);
  }
}

deploy();

#!/bin/bash

set -e  # 遇到错误就退出

echo"开始部署..."

# 拉取代码
git pull origin main
if [ $? -ne 0 ]; then
echo"拉取失败"
exit 1
fi

# 安装依赖
npm install
if [ $? -ne 0 ]; then
echo"安装失败"
exit 1
fi

# 构建
npm run build
if [ $? -ne 0 ]; then
echo"构建失败"
exit 1
fi

echo"部署成功"

#!/usr/bin/env zx

console.log('开始部署...');

// 直接用模板字符串执行Shell命令
await $`git pull origin main`;
await $`npm install`;
await $`npm run build`;

console.log('部署成功!');

# Bash写法
git pull
if [ $? -ne 0 ]; then
  echo "失败了"
fi

// zx写法
try {
  await $`git pull`;
} catch (error) {
  console.log('失败了');
}

#!/usr/bin/env zx

// 我的所有项目
const projects = [
'admin-dashboard',
'mobile-app',
'landing-page',
'component-library',
// ... 还有10个项目
];

const basePath = '/Users/me/projects';

// 并发处理,但一次最多5个
const concurrency = 5;
for (let i = 0; i < projects.length; i += concurrency) {
const batch = projects.slice(i, i + concurrency);

awaitPromise.all(
    batch.map(async (project) => {
      const projectPath = `${basePath}/${project}`;
      
      try {
        // 进入项目目录
        cd(projectPath);
        
        // 拉取最新代码
        await $`git pull origin main`;
        
        // 升级React到19版本
        await $`npm install react@19 react-dom@19`;
        
        // 运行测试,确保没问题
        await $`npm test`;
        
        // 提交改动
        await $`git add package.json package-lock.json`;
        await $`git commit -m "chore: upgrade to React 19"`;
        await $`git push`;
        
        console.log(`✅ ${project} 升级完成`);
      } catch (error) {
        console.error(`❌ ${project} 失败:`, error.message);
      }
    })
  );
}

console.log('全部完成!');

脚本运行中：
内存数据 → 调用db.write() → 保存到db.json

下次启动：
db.json文件 → 调用db.read() → 加载到内存

import { Low } from'lowdb';
import { JSONFile } from'lowdb/node';

// 初始化数据库
const db = new Low(new JSONFile('crawler-progress.json'), {
posts: [],        // 已抓取的帖子
lastPostId: 0,    // 最后处理到哪个ID
successCount: 0,  // 成功数量
failCount: 0,     // 失败数量
});

await db.read(); // 读取之前的进度

asyncfunction crawlPosts() {
const startId = db.data.lastPostId + 1; // 从上次的位置继续
const endId = 1000;

console.log(`从帖子${startId}开始抓取...`);

for (let id = startId; id <= endId; id++) {
    try {
      // 抓取帖子数据
      const post = await fetchPost(id);
      
      // 保存数据
      db.data.posts.push(post);
      db.data.lastPostId = id;
      db.data.successCount++;
      
      // 每10个保存一次,避免频繁写文件
      if (id % 10 === 0) {
        await db.write();
        console.log(`进度: ${id}/${endId}, 成功:${db.data.successCount}`);
      }
      
      // 间隔1秒,避免被封IP
      await sleep(1000);
    } catch (error) {
      db.data.failCount++;
      console.error(`帖子${id}抓取失败:`, error.message);
    }
  }

await db.write(); // 最后保存
console.log(`完成! 成功:${db.data.successCount}, 失败:${db.data.failCount}`);
}

crawlPosts();

开始部署
拉取代码
安装依赖
构建项目
上传文件
完成

⠹ 拉取代码...
✔ 拉取代码完成
⠹ 安装依赖...
✔ 安装依赖完成
⠹ 构建项目...
✔ 构建项目完成
⠸ 上传文件... (34/100 files)
✔ 部署成功!

import ora from'ora';

const spinner = ora({
text: '正在处理...',
color: 'cyan',
spinner: 'dots', // 可选: dots, line, bouncingBar等
}).start();

// 模拟耗时操作
await someAsyncTask();

// 更新文本
spinner.text = '处理中... 50%';

// 成功结束
spinner.succeed('处理完成!');

// 失败结束
spinner.fail('处理失败!');

// 警告
spinner.warn('处理完成,但有警告');

// 普通信息
spinner.info('这是一条提示');

⠋ → ⠙ → ⠹ → ⠸ → ⠼ → ⠴ → ⠦ → ⠧ （循环）

Running ESLint...
Running tests...
Generating coverage report...
Done

import ora from'ora';
import { execa } from'execa';

asyncfunction runCI() {
// 1. 代码检查
const lintSpinner = ora('检查代码规范...').start();
try {
    await execa('eslint', ['src/**/*.{js,jsx,ts,tsx}']);
    lintSpinner.succeed('代码规范检查通过');
  } catch (error) {
    lintSpinner.fail('发现代码规范问题');
    console.error(error.stdout);
    process.exit(1);
  }

// 2. 单元测试
const testSpinner = ora('运行单元测试...').start();
try {
    const { stdout } = await execa('jest', ['--coverage']);
    const match = stdout.match(/All files.*?(\d+\.\d+)/);
    const coverage = match ? match[1] : 'unknown';
    testSpinner.succeed(`测试通过 (覆盖率: ${coverage}%)`);
  } catch (error) {
    testSpinner.fail('测试失败');
    process.exit(1);
  }

// 3. 构建
const buildSpinner = ora('构建生产版本...').start();
try {
    await execa('bun', ['run', 'build']);
    buildSpinner.succeed('构建完成');
  } catch (error) {
    buildSpinner.fail('构建失败');
    process.exit(1);
  }

console.log('\n🎉 所有检查通过,可以发版了!');
}

runCI();

✔ 代码规范检查通过
✔ 测试通过 (覆盖率: 87.3%)
✔ 构建完成

🎉 所有检查通过,可以发版了!

传统Webhook流程:
Stripe ──→ 你的服务器 (失败就没了)

使用Hookdeck:
Stripe ──→ Hookdeck ──→ 你的服务器
            │
            ├─ 失败自动重试(指数退避)
            ├─ 记录所有请求日志
            └─ 验证签名合法性

传统：支付宝 → 你的服务器（不在家，通知丢了）

Hookdeck：支付宝 → Hookdeck → 你的服务器
                    ↓
                先存着，你回来再送
                自动重试5次
                记录所有日志

// 接收Stripe的支付成功回调
app.post('/webhooks/stripe', async (req, res) => {
  const event = req.body;
  
  if (event.type === 'payment_intent.succeeded') {
    const orderId = event.data.object.metadata.order_id;
    await updateOrderStatus(orderId, 'paid');
  }
  
  res.json({ received: true });
});

import { HookdeckClient } from'@hookdeck/sdk';
import express from'express';

const app = express();

// Stripe的Webhook现在先发到Hookdeck,再转发给我
app.post('/webhooks/stripe', async (req, res) => {
const event = req.body;

try {
    if (event.type === 'payment_intent.succeeded') {
      const orderId = event.data.object.metadata.order_id;
      await updateOrderStatus(orderId, 'paid');
      console.log(`订单${orderId}支付成功`);
    }

    res.json({ received: true });
  } catch (error) {
    console.error('处理失败:', error);
    // 返回500,Hookdeck会自动重试
    res.status(500).json({ error: error.message });
  }
});

// 本地调试时,可以查询历史Webhook
asyncfunction debugWebhook() {
const hookdeck = new HookdeckClient({
    apiKey: process.env.HOOKDECK_KEY,
  });

const events = await hookdeck.events.list({ limit: 10 });
  events.data.forEach((event) => {
    console.log(`事件: ${event.id}, 状态: ${event.status}`);
  });
}

app.listen(3000);