unplugin-check-syntax

Un plugin de comprobación de sintaxis universal, compatible con múltiples herramientas de construcción (Webpack, Vite, Rollup, esbuild, Rspack, etc.), diseñado para verificar la compatibilidad de la sintaxis ECMAScript en archivos JavaScript y HTML. Este plugin está basado en rsbuild-plugin-check-syntax.

Características

• 🔧 Compatibilidad con múltiples herramientas de construcción: Compatible con Webpack, Vite, Rollup, esbuild, Rspack, etc.
• 📝 Tipos de archivos múltiples: Soporta archivos JavaScript y scripts incrustados en archivos HTML
• 🎯 Localización precisa: Compatible con sourcemap, puede rastrear la ubicación en el archivo fuente
• ⚙️ Configuración flexible: Permite excluir archivos, incluir manualmente, filtrar tipos de error, etc.
• 📁 Detección inteligente de archivos: Permite incluir manualmente archivos JS/HTML adicionales usando patrones glob
• 🌐 Integración con Browserslist: Soporta configuración de browserslist para conversión automática a versión ECMAScript

Instalación

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

Método de uso

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

Webpack

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

Rollup

Acumulación

Resumen

// 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'],
    }),
  ],
}

Opciones de configuración

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')[];
}

Ejemplo de uso

Configuración básica

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

Archivos excluidos

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

Incluir archivos adicionales

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

Salida de error personalizada

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

Guía de migración

Si estás migrando desde @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'],
    }),
  ],
})

Principio de funcionamiento

• Revisión después de la compilación: El plugin revisa los archivos de salida después de la compilación
• Análisis sintáctico: Utiliza el analizador Acorn para verificar la sintaxis de JavaScript
• Verificación de compatibilidad: Verifica la compatibilidad sintáctica según la versión de ECMAScript configurada
• Informe de errores: Proporciona información detallada del error, incluyendo la ubicación del archivo y el fragmento de código fuente
• Soporte de Sourcemap: Si existe un sourcemap, rastrea hasta el archivo fuente original

Licencia

Licencia MIT

Contribución

¡Se aceptan Issues y Pull Requests!

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