Elysia Tools

Parcourez outils, exemples, explications visuelles et guides thématiques dans un espace clair.

Catégories populaires

Dossiers

Langue
ZHDERUPTENFRES

Elysia Tools

Navigation mobile

Outils de build

Exemples de SWC Rust Compiler

Exemples de Speedy Web Compiler (SWC) incluant configuration, plugins, et intégration avec projets JavaScript/TypeScript modernes

Exemples

Entrées de cette collection

Code sourcejsonSimple

Configuration de Base SWC

Configuration complète de SWC pour projets JavaScript/TypeScript avec configuration et plugins de base

Difficulté

3/10

Temps estimé

15 min

Étiquettes

swc, configuration, setup

Prérequis

Node.js, npm/yarn, Basic TypeScript

json
// SWC Basic Configuration Setup

// 1. Installation
// npm install --save-dev @swc/core @swc/cli
// npm install --save-dev @swc/jest @swc/register (for testing)

// 2. .swcrc - Basic SWC Configuration
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dynamicImport": true,
      "importAssertions": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": false,
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment"
      },
      "decoratorMetadata": true,
      "legacyDecorator": true,
      "useDefineForClassFields": true
    },
    "target": "es2020",
    "loose": false,
    "externalHelpers": false,
    "keepClassNames": false,
    "shorthand": "object",
    "minify": {
      "compress": true,
      "mangle": true
    }
  },
  "module": {
    "type": "es6",
    "strict": true,
    "strictMode": true,
    "lazy": false,
    "noInterop": false
  },
  "minify": true,
  "sourceMaps": true,
  "inlineSourcesContent": false,
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "**/*.test.ts",
    "**/*.spec.ts"
  ],
  "env": {
    "production": {
      "minify": true,
      "sourceMaps": false,
      "jsc": {
        "minify": {
          "compress": {
            "drop_console": true,
            "drop_debugger": true,
            "pure_funcs": ["console.log"]
          }
        }
      }
    },
    "development": {
      "minify": false,
      "sourceMaps": true,
      "jsc": {
        "transform": {
          "react": {
            "development": true,
            "refresh": true
          }
        }
      }
    },
    "test": {
      "minify": false,
      "sourceMaps": true,
      "jsc": {
        "transform": {
          "react": {
            "development": true
          }
        }
      }
    }
  }
}

// 3. .swcrc for React with TypeScript
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": true,
        "refresh": true,
        "importSource": "@emotion/react"
      }
    },
    "target": "es2020",
    "externalHelpers": false
  },
  "module": {
    "type": "es6"
  },
  "sourceMaps": true
}

// 4. .swcrc for Node.js Backend
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true
    },
    "target": "es2022",
    "externalHelpers": true
  },
  "module": {
    "type": "commonjs"
  },
  "sourceMaps": true,
  "exclude": ["node_modules"]
}

// 5. package.json scripts using SWC
{
  "name": "my-swc-project",
  "version": "1.0.0",
  "scripts": {
    "build": "swc src --out-dir dist",
    "build:watch": "swc src --out-dir dist --watch",
    "build:minify": "NODE_ENV=production swc src --out-dir dist",
    "start": "node dist/index.js",
    "dev": "swc src --out-dir dist --watch & nodemon dist/index.js",
    "clean": "rm -rf dist",
    "type-check": "tsc --noEmit"
  },
  "devDependencies": {
    "@swc/cli": "^0.1.62",
    "@swc/core": "^1.4.0",
    "@types/node": "^20.8.0",
    "typescript": "^5.2.0",
    "nodemon": "^3.0.0"
  },
  "dependencies": {
    "@swc/helpers": "^0.5.0"
  }
}

// 6. tsconfig.json (companion to SWC)
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"],
      "@/utils/*": ["utils/*"],
      "@/types/*": ["types/*"]
    },
    "jsx": "react-jsx",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "**/*.test.ts",
    "**/*.spec.ts"
  ]
}

// 7. Command-line usage examples
/*
# Basic compilation
swc src --out-dir dist

# Watch mode
swc src --out-dir dist --watch

# Compile specific file
swc src/index.ts --out-file dist/index.js

# Minify output
swc src --out-dir dist --minify

# Disable source maps
swc src --out-dir dist --no-sourcemap

# Copy files (non-JS/TS)
swc src --out-dir dist --copy-files

# Ignore files
swc src --out-dir dist --ignore "src/**/*.test.ts,src/**/*.spec.ts"

# Use custom config
swc src --out-dir dist --config-file .swcrc.prod

# Verbose output
swc src --out-dir dist --verbose
*/

// 8. Environment variables for SWC
/*
SWC_SOURCEMAP - Enable/disable source maps
SWC_MINIFY - Enable/disable minification
SWC_TARGET - Compilation target
SWC_MODULE - Module type (es6, commonjs)
SWC_CONFIG_PATH - Path to config file
*/

// 9. Basic source file examples

// src/utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export function multiply(a: number, b: number): number {
  return a * b;
}

export const PI = 3.14159;

// src/types/index.ts
export interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

export interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: string;
}

// src/index.ts
import { add, multiply, PI } from './utils';
import { User, ApiResponse } from './types';

class Calculator {
  private result: number = 0;

  add(value: number): this {
    this.result = add(this.result, value);
    return this;
  }

  multiply(value: number): this {
    this.result = multiply(this.result, value);
    return this;
  }

  getResult(): number {
    return this.result;
  }

  reset(): void {
    this.result = 0;
  }
}

const calc = new Calculator();
const result = calc.add(5).multiply(2).getResult();
console.log('Result:', result);
console.log('PI:', PI);

export { Calculator };
Code sourcejavascriptIntermédiaire

Exemples d'Intégration SWC

Intégration de SWC avec frameworks et outils populaires incluant Webpack, Rollup, Jest, et Next.js

Difficulté

6/10

Temps estimé

30 min

Étiquettes

swc, integration, tools

Prérequis

SWC basics, Modern JavaScript tools, Build systems

javascript
// SWC Integration Examples with Popular Tools

// 1. Webpack Integration (webpack.config.js)
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
              },
              target: 'es2020',
            },
            module: {
              type: 'commonjs',
            },
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.tsx$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                },
              },
              target: 'es2020',
            },
            module: {
              type: 'commonjs',
            },
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
};

// 2. Rollup Integration (rollup.config.js)
import swc from '@rollup/plugin-swc';
import typescript from '@rollup/plugin-typescript';

const rollupConfig = [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/index.esm.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      swc({
        jsc: {
          parser: {
            syntax: 'typescript',
          },
          target: 'es2020',
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
        module: {
          type: 'es6',
        },
        exclude: /node_modules/,
      }),
    ],
    external: ['react', 'react-dom'],
  },
];

// 3. Jest Integration (jest.config.js)
module.exports = {
  roots: ['<rootDir>/src'],
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.(ts|tsx)$': ['@swc/jest', {
      jsc: {
        parser: {
          syntax: 'typescript',
          tsx: true,
          decorators: true,
        },
        transform: {
          react: {
            runtime: 'automatic',
            development: true,
          },
        },
        target: 'es2020',
      },
    }],
  },
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/test/**/*',
    '!src/**/*.stories.tsx',
  ],
  coverageReporters: ['text', 'lcov', 'html'],
};

// 4. Next.js Integration (next.config.js)
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcMinify: true, // Enable SWC minification
  },
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  webpack(config, { isServer }) {
    // Use SWC for TypeScript files
    config.module.rules.unshift({
      test: /\\.(ts|tsx)$/,
      use: {
        loader: 'swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
              tsx: true,
              decorators: true,
              dynamicImport: true,
            },
            transform: {
              react: {
                runtime: 'automatic',
              },
            },
            target: 'es2020',
          },
          module: {
            type: isServer ? 'commonjs' : 'es6',
          },
        },
      },
      exclude: /node_modules/,
    });

    return config;
  },
};

module.exports = nextConfig;

// 5. Vite Integration (vite.config.js)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const viteConfig = defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      // Use SWC for Fast Refresh
      fastRefresh: true,
    }),
  ],
  esbuild: false, // Disable esbuild to use SWC
  optimizeDeps: {
    // Exclude dependencies that should be processed by SWC
    exclude: ['@emotion/react', '@emotion/styled'],
  },
  server: {
    fs: {
      // Allow serving files from one level up
      allow: ['..'],
    },
  },
});

// 6. Gulp Integration (gulpfile.js)
const { src, dest, watch, series, parallel } = require('gulp');
const swc = require('gulp-swc');

function compileScripts() {
  return src('src/**/*.{ts,tsx}')
    .pipe(swc({
      jsc: {
        parser: {
          syntax: 'typescript',
          tsx: true,
        },
        target: 'es2020',
      },
      module: {
        type: 'commonjs',
      },
    }))
    .pipe(dest('dist'));
}

function watchFiles() {
  watch('src/**/*.{ts,tsx}', compileScripts);
}

exports.build = compileScripts;
exports.watch = watchFiles;
exports.default = series(compileScripts);

// 7. Custom SWC Plugin Example
// plugins/my-swc-plugin.js
module.exports = function () {
  return {
    visitor: {
      // Transform console.log calls in production
      CallExpression(path) {
        if (
          path.node.callee.type === 'MemberExpression' &&
          path.node.callee.object.type === 'Identifier' &&
          path.node.callee.object.name === 'console'
        ) {
          // Remove or transform console calls
          path.remove();
        }
      },

      // Add version comment to function declarations
      FunctionDeclaration(path) {
        const leadingComments = path.node.leadingComments || [];
        leadingComments.push({
          type: 'CommentLine',
          value: ' Generated by SWC ',
        });
        path.node.leadingComments = leadingComments;
      },
    },
  };
};

// 8. Advanced SWC Configuration with Custom Plugins
// .swcrc
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": false
      },
      "optimizer": {
        "globals": {
          "vars": {
            "process.env.NODE_ENV": "production"
          }
        }
      }
    },
    "target": "es2020",
    "experimental": {
      "plugins": [
        ["./plugins/my-swc-plugin.js", {}]
      ]
    },
    "loose": false,
    "externalHelpers": true
  },
  "module": {
    "type": "es6",
    "strict": true
  },
  "minify": true,
  "sourceMaps": true,
  "env": {
    "production": {
      "minify": true,
      "jsc": {
        "minify": {
          "compress": {
            "drop_console": true,
            "drop_debugger": true,
            "pure_funcs": ["console.log", "console.info"],
            "passes": 2
          },
          "mangle": {
            "safari10": true
          }
        }
      }
    }
  }
}

// 9. Docker Integration (Dockerfile)
FROM node:20-alpine

# Install pnpm
RUN npm install -g pnpm

WORKDIR /app

# Copy package files
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN pnpm install --frozen-lockfile

# Copy source code
COPY .swcrc ./
COPY tsconfig.json ./
COPY src ./src

# Build with SWC
RUN pnpm build

# Production stage
FROM node:20-alpine

WORKDIR /app

# Copy built application
COPY --from=0 /app/dist ./dist
COPY --from=0 /app/node_modules ./node_modules
COPY --from=0 /app/package.json ./

EXPOSE 3000

CMD ["node", "dist/index.js"]

// 10. CI/CD Integration (GitHub Actions)
# .github/workflows/build.yml
name: Build and Test

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Type check
        run: npm run type-check

      - name: Build with SWC
        run: npm run build

      - name: Run tests
        run: npm test

      - name: Upload build artifacts
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: dist/
Code sourcetypescriptComplexe

Optimisation et Plugins Personnalisés SWC

Techniques d'optimisation avancées SWC, développement de plugins personnalisés, et réglage de performance

Difficulté

9/10

Temps estimé

50 min

Étiquettes

swc, plugins, optimization, advanced

Prérequis

Advanced SWC, Plugin development, Performance optimization

typescript
// SWC Advanced Optimization and Custom Plugins

// 1. Performance-Optimized SWC Configuration
// .swcrc.performance
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true,
      "importAssertions": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": false,
        "importSource": "@emotion/react"
      },
      "optimizer": {
        "globals": {
          "vars": {
            "process.env.NODE_ENV": "production",
            "process.env.APP_VERSION": "\"1.0.0\""
          }
        }
      }
    },
    "target": "es2022",
    "externalHelpers": true,
    "loose": false,
    "keepClassNames": false,
    "shorthand": "object",
    "assumptions": {
      "noDocumentAll": true,
      "noIterator": true,
      "noIsNan": true,
      "objectRestNoSymbols": true,
      "pureGetters": true,
      "setPublicClassFields": true,
      "skipForOfIteratorClosing": true
    }
  },
  "module": {
    "type": "es6",
    "strict": true,
    "strictMode": true,
    "lazy": false,
    "noInterop": false
  },
  "minify": {
    "compress": {
      "drop_console": true,
      "drop_debugger": true,
      "passes": 2,
      "dead_code": true,
      "evaluate": true,
      "hoist_funs": true,
      "hoist_vars": true,
      "inline": 2,
      "join_vars": true,
      "keep_fargs": false,
      "keep_fnames": false,
      "reduce_funcs": true,
      "reduce_vars": true,
      "side_effects": true,
      "switches": true,
      "toplevel": true,
      "typeofs": false,
      "unsafe_comps": true,
      "unsafe_Function": true,
      "unsafe_math": true,
      "unsafe_proto": true,
      "unsafe_regexp": false,
      "unsafe_undefined": true
    },
    "mangle": {
      "safari10": true,
      "properties": {
        "regex": "^_",
        "reserved": []
      },
      "topretain": ["init", "config", "handler"],
      "keep_fnames": false,
      "keep_classnames": false
    }
  },
  "sourceMaps": false,
  "inlineSourcesContent": false
}

// 2. Custom Plugin: Bundle Size Analyzer
// plugins/bundle-analyzer-plugin.ts
import { Visitor } from '@swc/core/Visitor';
import { Module } from '@swc/core';

interface BundleStats {
  functions: number;
  classes: number;
  imports: number;
  exports: number;
  variables: number;
}

class BundleAnalyzerPlugin extends Visitor {
  private stats: BundleStats = {
    functions: 0,
    classes: 0,
    imports: 0,
    exports: 0,
    variables: 0
  };

  visitFunction(path: any) {
    this.stats.functions++;
    return super.visitFunction(path);
  }

  visitClass(path: any) {
    this.stats.classes++;
    return super.visitClass(path);
  }

  visitImportDeclaration(path: any) {
    this.stats.imports++;
    return super.visitImportDeclaration(path);
  }

  visitExportDeclaration(path: any) {
    this.stats.exports++;
    return super.visitExportDeclaration(path);
  }

  visitVariableDeclaration(path: any) {
    this.stats.variables++;
    return super.visitVariableDeclaration(path);
  }

  getStats(): BundleStats {
    return this.stats;
  }
}

export function bundleAnalyzer() {
  return new BundleAnalyzerPlugin();
}

// 3. Custom Plugin: Import Optimizer
// plugins/import-optimizer-plugin.ts
import { Visitor } from '@swc/core/Visitor';

class ImportOptimizerPlugin extends Visitor {
  private static readonly LodashMethods = new Set([
    'map', 'filter', 'reduce', 'forEach', 'find', 'some', 'every', 'flatMap'
  ]);

  visitImportDeclaration(path: any) {
    const { node } = path;

    if (
      node.source.value === 'lodash' &&
      node.specifiers?.some((spec: any) =>
        spec.type === 'ImportDefaultSpecifier'
      )
    ) {
      // Convert `import _ from 'lodash'` to named imports
      console.warn('Consider using named imports for lodash:', node);
    }

    // Convert namespace imports to named imports where possible
    node.specifiers?.forEach((spec: any) => {
      if (spec.type === 'ImportNamespaceSpecifier') {
        console.warn('Namespace import detected:', spec.local.name);
      }
    });

    return super.visitImportDeclaration(path);
  }
}

export function importOptimizer() {
  return new ImportOptimizerPlugin();
}

// 4. Custom Plugin: React Performance Optimizer
// plugins/react-optimizer-plugin.ts
import { Visitor } from '@swc/core/Visitor';

class ReactOptimizerPlugin extends Visitor {
  visitArrowFunctionExpression(path: any) {
    const { node } = path;

    // Suggest useCallback for arrow functions in React components
    if (this.isInsideReactComponent(path)) {
      console.log('Consider wrapping arrow function in useCallback:', node);
    }

    return super.visitArrowFunctionExpression(path);
  }

  visitFunctionDeclaration(path: any) {
    const { node } = path;

    // Suggest useMemo for expensive computations
    if (this.isExpensiveFunction(node)) {
      console.log('Consider wrapping function in useMemo:', node);
    }

    return super.visitFunctionDeclaration(path);
  }

  visitCallExpression(path: any) {
    const { node } = path;

    // Optimize React.createElement calls
    if (
      node.callee.type === 'MemberExpression' &&
      node.callee.object.name === 'React' &&
      node.callee.property.name === 'createElement'
    ) {
      // Suggest JSX usage over createElement
      console.log('Consider using JSX instead of React.createElement:', node);
    }

    return super.visitCallExpression(path);
  }

  private isInsideReactComponent(path: any): boolean {
    // Check if the current path is inside a React component
    let current = path;
    while (current.parentPath) {
      const parent = current.parentPath.node;
      if (
        parent.type === 'FunctionDeclaration' ||
        parent.type === 'ArrowFunctionExpression'
      ) {
        // Check if it returns JSX
        if (this.returnsJSX(parent)) {
          return true;
        }
      }
      current = current.parentPath;
    }
    return false;
  }

  private returnsJSX(node: any): boolean {
    // Simplified check - in real implementation, this would be more sophisticated
    return node.body?.type?.includes('JSX') || false;
  }

  private isExpensiveFunction(node: any): boolean {
    // Heuristic to detect expensive computations
    const expensivePatterns = ['map', 'filter', 'reduce', 'forEach'];
    const functionBody = JSON.stringify(node);
    return expensivePatterns.some(pattern =>
      functionBody.includes(pattern) && functionBody.length > 100
    );
  }
}

export function reactOptimizer() {
  return new ReactOptimizerPlugin();
}

// 5. Custom Plugin: Internationalization Extractor
// plugins/i18n-extractor-plugin.ts
import { Visitor } from '@swc/core/Visitor';
import * as fs from 'fs';
import * as path from 'path';

interface TranslationKey {
  key: string;
  file: string;
  line: number;
  namespace?: string;
}

class I18nExtractorPlugin extends Visitor {
  private translationKeys: TranslationKey[] = [];
  private currentFile: string = '';

  visitCallExpression(path: any) {
    const { node, parent } = path;

    // Extract translation keys from t('key') calls
    if (
      node.callee.type === 'Identifier' &&
      node.callee.name === 't' &&
      node.arguments.length > 0
    ) {
      const firstArg = node.arguments[0];

      if (firstArg.type === 'StringLiteral') {
        this.addTranslationKey({
          key: firstArg.value,
          file: this.currentFile,
          line: node.loc?.start.line || 0
        });
      }
    }

    // Extract from useTranslation('namespace') calls
    if (
      node.callee.type === 'Identifier' &&
      node.callee.name === 'useTranslation' &&
      node.arguments.length > 0
    ) {
      const firstArg = node.arguments[0];

      if (firstArg.type === 'StringLiteral') {
        // Store namespace for subsequent t() calls in this scope
        console.log('Found i18n namespace:', firstArg.value);
      }
    }

    return super.visitCallExpression(path);
  }

  private addTranslationKey(key: Omit<TranslationKey, 'file' | 'line'>) {
    this.translationKeys.push({
      ...key,
      file: this.currentFile,
      line: 0 // Would need proper line tracking in real implementation
    });
  }

  setCurrentFile(filePath: string) {
    this.currentFile = filePath;
  }

  getTranslationKeys(): TranslationKey[] {
    return this.translationKeys;
  }

  exportTranslationKeys(outputPath: string) {
    const uniqueKeys = Array.from(
      new Set(this.translationKeys.map(k => k.key))
    );

    const translations: Record<string, string> = {};
    uniqueKeys.forEach(key => {
      translations[key] = ''; // Empty string for translation
    });

    fs.writeFileSync(outputPath, JSON.stringify(translations, null, 2));
  }
}

// Usage example
const i18nPlugin = new I18nExtractorPlugin();
i18nPlugin.setCurrentFile('src/components/MyComponent.tsx');

// 6. Advanced SWC Configuration with Plugins
// .swcrc.advanced
{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": false
      }
    },
    "experimental": {
      "plugins": [
        ["./plugins/react-optimizer-plugin.ts", {}],
        ["./plugins/import-optimizer-plugin.ts", {}],
        ["./plugins/bundle-analyzer-plugin.ts", {}]
      ]
    },
    "target": "es2022",
    "externalHelpers": true
  },
  "module": {
    "type": "es6"
  },
  "minify": true
}

// 7. Performance Benchmarking Script
// scripts/benchmark-swc.js
const { spawn } = require('child_process');
const fs = require('fs');
const path = require('path');

async function runSWC(options = {}) {
  const startTime = process.hrtime.bigint();

  const swcProcess = spawn('npx', ['swc', 'src', '--out-dir', 'dist', ...options.args], {
    stdio: 'pipe'
  });

  return new Promise((resolve, reject) => {
    let stdout = '';
    let stderr = '';

    swcProcess.stdout.on('data', (data) => {
      stdout += data.toString();
    });

    swcProcess.stderr.on('data', (data) => {
      stderr += data.toString();
    });

    swcProcess.on('close', (code) => {
      const endTime = process.hrtime.bigint();
      const duration = Number(endTime - startTime) / 1000000; // Convert to milliseconds

      resolve({
        code,
        duration,
        stdout,
        stderr,
        outputSize: getDirectorySize('dist')
      });
    });

    swcProcess.on('error', reject);
  });
}

function getDirectorySize(dirPath) {
  let totalSize = 0;

  try {
    const files = fs.readdirSync(dirPath);

    files.forEach(file => {
      const filePath = path.join(dirPath, file);
      const stats = fs.statSync(filePath);

      if (stats.isDirectory()) {
        totalSize += getDirectorySize(filePath);
      } else {
        totalSize += stats.size;
      }
    });
  } catch (error) {
    // Directory doesn't exist
  }

  return totalSize;
}

async function runBenchmarks() {
  const configs = [
    { name: 'Basic', args: [] },
    { name: 'Minified', args: ['--minify'] },
    { name: 'No Source Maps', args: ['--no-sourcemap'] },
    { name: 'Production', args: ['--minify', '--no-sourcemap'] }
  ];

  console.log('SWC Performance Benchmark\n');

  for (const config of configs) {
    console.log(`Testing configuration: ${config.name}`);

    // Clean dist directory
    if (fs.existsSync('dist')) {
      fs.rmSync('dist', { recursive: true });
    }

    const result = await runSWC(config);

    console.log(`  Duration: ${result.duration.toFixed(2)}ms`);
    console.log(`  Exit code: ${result.code}`);
    console.log(`  Output size: ${(result.outputSize / 1024).toFixed(2)} KB`);
    console.log();
  }
}

runBenchmarks().catch(console.error);

// 8. SWC Plugin Development Template
// plugins/template-plugin.ts
import { Visitor } from '@swc/core/Visitor';
import { Module } from '@swc/core';

interface PluginOptions {
  option1?: string;
  option2?: boolean;
  customTransform?: (node: any) => any;
}

class TemplatePlugin extends Visitor {
  private options: PluginOptions;

  constructor(options: PluginOptions = {}) {
    super();
    this.options = options;
  }

  visitProgram(path: any) {
    // Called for each module/program
    console.log('Processing file:', path.hub.file.filename);
    return super.visitProgram(path);
  }

  visitFunction(path: any) {
    // Called for each function declaration/expression
    if (this.options.option2) {
      console.log('Found function:', path.node.id?.name);
    }

    return super.visitFunction(path);
  }

  visitIdentifier(path: any) {
    // Called for each identifier
    if (path.node.name === this.options.option1) {
      console.log('Found target identifier:', path.node.name);
    }

    return super.visitIdentifier(path);
  }

  // Add more visitor methods as needed
  visitClassDeclaration(path: any) {
    return super.visitClassDeclaration(path);
  }

  visitCallExpression(path: any) {
    // Apply custom transform if provided
    if (this.options.customTransform) {
      const transformed = this.options.customTransform(path.node);
      if (transformed) {
        path.replaceWith(transformed);
      }
    }

    return super.visitCallExpression(path);
  }
}

export function createTemplatePlugin(options: PluginOptions = {}) {
  return new TemplatePlugin(options);
}

// Export individual plugin creators
export {
  bundleAnalyzer,
  importOptimizer,
  reactOptimizer
};

Outils

Outils souvent utilisés avec cet exemple

Associé

Collections d’exemples associées

Associé

Dossiers associés

Dossier

Déduire un JSON Schema depuis des exemples et des tableurs

Produisez un brouillon de JSON Schema relisible à partir d'exemples JSON représentatifs ou de lignes XLSX, puis examinez types, caractère obligatoire, valeurs nulles et anomalies avant toute adoption contractuelle.

Dossier

Generateurs JSON vers code type

Generez des modeles types depuis JSON ou schema pour TypeScript, Go, Rust, Kotlin, Java, C# et la validation Zod.

Dossier

Revue et livraison d’un module de jeu promotionnel auto-hébergé

Contrôlez configuration, exemples de réponses, lisibilité et affichage adaptatif avant de livrer les fichiers du module et les preuves de recette de son intégration.

Dossier

Signature, tampons et traçage de distribution de PDF

Envoyez des PDF dont vous pouvez prouver l'origine — supprimez définitivement le contenu sensible avant de sceller, ajoutez un bloc de signature visible et une signature de certificat PAdES, tamponnez le statut du document, incrustez des identifiants de traçage invisibles par destinataire et auditez les signatures reçues jusqu'à la chaîne de certificats.

Accueil
Outils3212
Exemples593
Visualisations471
Visionneuses de fichiers103
Dossiers239
Étiquettes333
Images, audio et vidéo657

Outils de traitement, conversion et optimisation d’images, d’audio et de vidéo

Maths, dates et finance647

Calculateurs, outils numériques, logique de dates, statistiques et finance

Design et couleur298

Outils de couleur, mise en page, graphisme, style visuel et assistance design

Texte et rédaction209

Outils de rédaction, nettoyage, formatage, extraction et analyse de texte

Développement et Web193

Utilitaires développeur, réseau, débogage Web et assistants d’automatisation

Conversion et encodage175

Outils de conversion de formats, fichiers, archives, unités et encodages

Lancement d’un quiz de prospection et transmission des contacts
Textes commémoratifs : validation familiale et remise pour impression
Habitudes privées : sauvegarde, restauration et partage vérifié
D’un article aux brouillons X et LinkedIn : revue factuelle et livraison
Revue de cours Markdown interactif et livraison hors ligne

© 2026 Elysia Tools. Tous droits réservés.

DocumentationTarifsÀ proposConditions d'utilisationPolitique de confidentialitéCookiesContact

Development

Générateur de Data URI

Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown

AI Tools

Reconnaissance OCR de Reçus et Factures

Extraire les informations clés des images de reçus/factures et les convertir en format JSON personnalisé en utilisant des modèles de vision IA

AI Tools

Reconnaissance OCR de Carte d'Identité IA

Extraire les informations clés des images de carte d'identité et les convertir au format JSON en utilisant des modèles de vision IA

Design

De la palette d’image aux design tokens

Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes

Document Tools

Générateur de Factures PDF

Génère une facture PDF avec marque à partir de lignes structurées

AI Tools

Capture d’interface vers JSON

Transformez une capture en arborescence visuelle modifiable et dossier pour le développement.

Media

Convertisseur ICO vers WebP

Convertir les fichiers d'icônes ICO au format WebP avec compression moderne et support de transparence

Media

Rognage d'Images par Lot

Rogner plusieurs images à des dimensions spécifiques ou un rapport d'aspect avec un positionnement personnalisé. Renvoie les images rognées en téléchargement ZIP.

Supervision

Exemples Avancés d'Application Grafana

Exemples complets de Grafana couvrant le design avancé de tableaux de bord, la configuration d'alertes, l'intégration de sources de données et le développement de plugins

Outils de développement

Exemples Toolchain JavaScript Rome

Exemples de toolchain JavaScript Rome incluant configuration, linting, formatting, bundling et gestion de projets

Outils de build

Exemples de Configuration Webpack

Exemples de configuration Webpack incluant la configuration de base, l'optimisation, les loaders, les plugins et les patterns Webpack modernes

Documents

Exemples PDF

Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10

Python

Exemples de Traitement d'Images Web Python

Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format

Rust

Exemples de Traitement d'Images Web Rust

Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format