unplugin-check-syntax

Plugin pemeriksa sintaksis universal, mendukung berbagai alat build (Webpack, Vite, Rollup, esbuild, Rspack, dll), digunakan untuk memeriksa kompatibilitas sintaksis ECMAScript di file JavaScript dan HTML. Plugin ini mengacu pada rsbuild-plugin-check-syntax.

Fitur

• 🔧 Dukungan Multi-Build Tool: Mendukung Webpack, Vite, Rollup, esbuild, Rspack, dll
• 📝 Dukungan Multi-Tipe File: Mendukung file JavaScript dan skrip inline di file HTML
• 🎯 Pelacakan Tepat: Mendukung sourcemap, dapat menelusuri ke lokasi file sumber
• ⚙️ Konfigurasi Fleksibel: Mendukung pengecualian file, inklusi manual, filter tipe error, dan opsi lainnya
• 📁 Penemuan File Pintar: Mendukung mode glob untuk menyertakan file JS/HTML tambahan secara manual
• 🌐 Integrasi Browserslist: Mendukung konfigurasi browserslist secara otomatis dikonversi ke versi ECMAScript

Instalasi

npm install @winner-fed/unplugin-check-syntax --save-dev

Cara Penggunaan

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import checkSyntax from '@winner-fed/unplugin-check-syntax/vite'
export default defineConfig({
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
      // 或者直接指定 ECMAScript 版本
      // ecmaVersion: 'es2015'
    }),
  ],
})

Webpack

// webpack.config.js
const checkSyntax = require('@winner-fed/unplugin-check-syntax/webpack')
module.exports = {
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
}

Rollup

// rollup.config.js
import checkSyntax from '@winner-fed/unplugin-check-syntax/rollup'
export default {
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
}

esbuild

// esbuild.config.js
const { build } = require('esbuild')
const checkSyntax = require('@winner-fed/unplugin-check-syntax/esbuild')
build({
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
})

Rspack

// rspack.config.js
const checkSyntax = require('@winner-fed/unplugin-check-syntax/rspack')
module.exports = {
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
}

Opsi Konfigurasi

interface CheckSyntaxOptions {
  /
   
目标浏览器范围，使用 browserslist 格式
   
*/
  targets?: string[];
  
  /
   
直接指定 ECMAScript 版本（优先级高于 targets）
   
*/
  ecmaVersion?: 'es3' | 'es5' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'latest';
  
  /
   
排除源文件检查，支持正则表达式
   
*/
  exclude?: RegExp | RegExp[];
  
  /
   
排除输出文件检查，支持正则表达式  
   
*/
  excludeOutput?: RegExp | RegExp[];
  
  /
   
手动包含额外的 JS 或 HTML 文件进行语法检查
   
支持文件路径（相对于项目根目录）或 glob 模式
   
*/
  include?: string[];
  
  /
   
排除特定的错误日志类型
   
*/
  excludeErrorLogs?: ('source' | 'output' | 'reason' | 'code')[];
}

Contoh Penggunaan

Konfigurasi Dasar

// 使用 browserslist 配置
checkSyntax({
  targets: ['> 1%', 'last 2 versions', 'not dead'],
})
// 直接指定 ECMAScript 版本
checkSyntax({
  ecmaVersion: 'es2015',
})

Mengecualikan Berkas

checkSyntax({
  targets: ['> 1%', 'last 2 versions'],
  // 排除 node_modules 和测试文件
  exclude: [/node_modules/, /\.test\.js$/],
  // 排除特定输出文件
  excludeOutput: [/vendor\.js$/],
})

Menyertakan File Tambahan

checkSyntax({
  targets: ['> 1%', 'last 2 versions'],
  // 手动包含额外的文件进行检查
  include: [
    'src/legacy//*.js',        // 包含 legacy 目录下的所有 JS 文件
    'public/scripts/app.js',     // 包含特定的公共脚本文件
    'docs//*.html',            // 包含文档中的 HTML 文件
    '/absolute/path/to/file.js'  // 支持绝对路径
  ],
})

Keluaran Kesalahan Khusus

checkSyntax({
  targets: ['> 1%', 'last 2 versions'],
  // 只显示错误原因，不显示代码片段
  excludeErrorLogs: ['code', 'output'],
})

Panduan Migrasi

Jika Anda sedang melakukan migrasi dari @rsbuild/plugin-check-syntax:

- import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax'
+ import checkSyntax from '@winner-fed/unplugin-check-syntax/vite' // 或其他构建工具
export default defineConfig({
  plugins: [
  pluginCheckSyntax({
+   checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
})

Prinsip Kerja

• Pemeriksaan Setelah Build: Plugin memeriksa file output setelah build selesai
• Parsing Sintaks: Menggunakan parser Acorn untuk memeriksa sintaks JavaScript
• Verifikasi Kompatibilitas: Memverifikasi kompatibilitas sintaks berdasarkan versi ECMAScript yang dikonfigurasi
• Pelaporan Kesalahan: Menyediakan informasi kesalahan yang rinci, termasuk lokasi file dan cuplikan kode sumber
• Dukungan Sourcemap: Jika terdapat sourcemap, akan menelusuri kembali ke file sumber asli

Lisensi

MIT License

Kontribusi

Issue dan Pull Request sangat diterima!

--- Tranlated By Open Ai Tx | Last indexed: 2025-07-21 ---