Aller au contenu

Feuilles de neige

Emballage de neige - L'outil de construction de façade plus rapide

Snowpack est un outil de construction frontend rapide à la foudre, conçu pour le web moderne. Il exploite le système de module natif de JavaScript (ESM) pour éviter le travail inutile et rester rapide, peu importe la taille de votre projet.

Copier toutes les commandes Générer PDF

Sommaire

  • [Installation] (#installation)
  • [Pour commencer] (#getting-started)
  • [Configuration] (#configuration)
  • Serveur de développement
  • [Processus de construction] (#build-process)
  • [Plugins] (#plugins)
  • [Gestion des emballages] (#package-management)
  • [Remplacement du module hôte] (#hot-module-replacement)
  • [Type de support de script] (#typescript-support)
  • [CSS et Styling] (#css-and-styling)
  • [Gestion de l'ensemble] (#asset-handling)
  • [variables environnementales] (#environment-variables)
  • [Optimisation] (#optimization)
  • [Déploiement] (#deployment)
  • [Migration] (#migration)
  • [Dépannage] (#troubleshooting)
  • [Meilleures pratiques] (#best-practices)

Installation

Installation mondiale

# Install Snowpack globally
npm install -g snowpack

# Check version
snowpack --version

Installation locale (recommandée)

# Initialize npm project
npm init -y

# Install Snowpack locally
npm install --save-dev snowpack

# Or with Yarn
yarn add --dev snowpack
```_

### Créer une application Snowpack
```bash
# Create new app with template
npx create-snowpack-app my-app --template @snowpack/app-template-react

# Available templates
npx create-snowpack-app my-app --template @snowpack/app-template-vanilla
npx create-snowpack-app my-app --template @snowpack/app-template-react
npx create-snowpack-app my-app --template @snowpack/app-template-vue
npx create-snowpack-app my-app --template @snowpack/app-template-svelte
npx create-snowpack-app my-app --template @snowpack/app-template-preact
npx create-snowpack-app my-app --template @snowpack/app-template-lit-element
```_

### Paquet.json Scripts
```json
{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "web-test-runner \"src/**/*.test.js\"",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
  }
}

Commencer

Structure de base du projet

my-snowpack-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── index.js
│   ├── index.css
│   └── logo.svg
├── snowpack.config.js
└── package.json

HTML de base Point d'entrée

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Web site created using Snowpack" />
  <title>Snowpack App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/index.js"></script>
</body>
</html>

Basic JavaScript Entrée

// src/index.js
import './index.css';

console.log('Hello Snowpack!');

// Hot Module Replacement API
if (import.meta.hot) {
  import.meta.hot.accept();
}

CSS de base

/* src/index.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Début du développement

# Start development server
npm start

# Or directly with Snowpack
npx snowpack dev

# Custom port
npx snowpack dev --port 3000

# Open browser automatically
npx snowpack dev --open

Configuration

Configuration de base

// snowpack.config.js
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    { match: 'routes', src: '.*', dest: '/index.html' },
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};

Configuration avancée

// snowpack.config.js
module.exports = {
  // Mount directories
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
    'src/components': { url: '/components' },
    'src/assets': { url: '/assets', static: true },
  },

  // Plugins
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-sass',
    '@snowpack/plugin-postcss',
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          config.plugins.push(/* ... */);
          return config;
        },
      },
    ],
  ],

  // Routes
  routes: [
    { match: 'routes', src: '.*', dest: '/index.html' },
    { match: 'routes', src: '/api/.*', dest: '/api/index.js' },
  ],

  // Optimization
  optimize: {
    bundle: true,
    minify: true,
    target: 'es2018',
  },

  // Package options
  packageOptions: {
    source: 'local',
    external: ['fs', 'path'],
    env: {
      NODE_ENV: true,
    },
    rollup: {
      plugins: [/* ... */],
    },
  },

  // Development options
  devOptions: {
    port: 8080,
    open: 'default',
    openUrl: 'http://localhost:8080',
    hmr: true,
    secure: false,
    hostname: 'localhost',
  },

  // Build options
  buildOptions: {
    out: 'build',
    baseUrl: '/',
    clean: true,
    sourcemap: true,
    metaUrlPath: 'snowpack',
  },

  // Aliases
  alias: {
    '@': './src',
    '@components': './src/components',
    '@utils': './src/utils',
  },
};

Configuration du script de type

// snowpack.config.js
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-react-refresh',
  ],
  packageOptions: {
    types: true,
  },
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "lib": [
      "dom",
      "dom.iterable",
      "es6"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  },
  "include": [
    "src"
  ]
}

Serveur de développement

Serveur de développement de base

# Start development server
snowpack dev

# Custom configuration
snowpack dev --config snowpack.dev.config.js

# Verbose output
snowpack dev --verbose

# Reload on file changes
snowpack dev --reload

Options de serveur de développement

// snowpack.config.js
module.exports = {
  devOptions: {
    // Port number
    port: 8080,

    // Hostname
    hostname: 'localhost',

    // Open browser
    open: 'default', // 'default', 'none', or browser name
    openUrl: 'http://localhost:8080',

    // Hot Module Replacement
    hmr: true,
    hmrDelay: 0,
    hmrPort: undefined,
    hmrErrorOverlay: true,

    // HTTPS
    secure: false,

    // Output
    output: 'stream', // 'stream' or 'dashboard'

    // Fallback
    fallback: 'index.html',
  },
};

Configuration de proxy

// snowpack.config.js
module.exports = {
  devOptions: {
    port: 3000,
  },
  routes: [
    {
      src: '/api/.*',
      dest: (req, res) => {
        // Proxy to backend API
        return proxy('http://localhost:8000', {
          changeOrigin: true,
        })(req, res);
      },
    },
  ],
};

Serveur personnalisé

// server.js
const { startServer } = require('snowpack');

async function start() {
  const server = await startServer({
    config: {
      devOptions: {
        port: 3000,
      },
    },
    lockfile: null,
  });

  console.log(`Server started on port ${server.port}`);
}

start();

Construire le processus

Construction de base

# Build for production
snowpack build

# Build with custom config
snowpack build --config snowpack.prod.config.js

# Clean build
snowpack build --clean

# Verbose build
snowpack build --verbose

Configuration de construction

// snowpack.config.js
module.exports = {
  buildOptions: {
    // Output directory
    out: 'build',

    // Base URL
    baseUrl: '/',

    // Clean output directory
    clean: true,

    // Source maps
    sourcemap: true,

    // Meta URL path
    metaUrlPath: 'snowpack',

    // Watch mode
    watch: false,
  },
};

Optimisation de la production

// snowpack.config.js
module.exports = {
  optimize: {
    // Bundle files
    bundle: true,

    // Minify code
    minify: true,

    // Target environment
    target: 'es2018',

    // Tree shaking
    treeshake: true,

    // Splitting
    splitting: true,

    // Manifest
    manifest: true,
  },

  buildOptions: {
    sourcemap: false, // Disable source maps in production
  },
};

Script de construction personnalisé

// build.js
const { build } = require('snowpack');

async function buildApp() {
  const result = await build({
    config: {
      mount: {
        public: { url: '/', static: true },
        src: { url: '/dist' },
      },
      optimize: {
        bundle: true,
        minify: true,
      },
    },
  });

  console.log('Build completed!');
  console.log('Result:', result);
}

buildApp().catch(console.error);

Greffons

Greffons essentiels

# Install common plugins
npm install --save-dev @snowpack/plugin-react-refresh
npm install --save-dev @snowpack/plugin-typescript
npm install --save-dev @snowpack/plugin-sass
npm install --save-dev @snowpack/plugin-postcss
npm install --save-dev @snowpack/plugin-dotenv
npm install --save-dev @snowpack/plugin-webpack

Réagir au plugin

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-react-refresh',
  ],
};

// src/App.jsx
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>
          Increment
        </button>
      </header>
    </div>
  );
}

export default App;

Plugin TypeScript

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-typescript',
  ],
};

Plugin Sass

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-sass',
  ],
};

// src/styles.scss
$primary-color: #007bff;
$secondary-color: #6c757d;

.button {
  background-color: $primary-color;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

PostCSS Greffon

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-postcss',
  ],
};

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

Plugin Webpack

// snowpack.config.js
module.exports = {
  plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          config.resolve.alias = {
            '@': path.resolve(__dirname, 'src'),
          };
          return config;
        },
      },
    ],
  ],
  optimize: {
    bundle: true,
    minify: true,
  },
};

Plugin personnalisé

// plugins/custom-plugin.js
module.exports = function (snowpackConfig, pluginOptions) {
  return {
    name: 'custom-plugin',
    resolve: {
      input: ['.custom'],
      output: ['.js'],
    },
    async load({ filePath }) {
      const contents = await fs.readFile(filePath, 'utf8');
      // Transform the file
      const result = transformCustomFile(contents);
      return {
        '.js': result,
      };
    },
  };
};

// snowpack.config.js
module.exports = {
  plugins: [
    './plugins/custom-plugin.js',
  ],
};

Gestion des paquets

Installation des paquets

# Install packages normally
npm install lodash
npm install react react-dom

# Snowpack will automatically handle ESM conversion

Configuration du paquet

// snowpack.config.js
module.exports = {
  packageOptions: {
    // Package source
    source: 'local', // 'local', 'remote', or 'remote-next'

    // External packages
    external: ['fs', 'path', 'crypto'],

    // Environment variables
    env: {
      NODE_ENV: true,
      API_URL: true,
    },

    // Package transformations
    knownEntrypoints: [
      'react/jsx-runtime',
      'react/jsx-dev-runtime',
    ],

    // Rollup options for dependencies
    rollup: {
      plugins: [
        // Custom rollup plugins for dependencies
      ],
      dedupe: ['react', 'react-dom'],
    },
  },
};

ESM Traitement des colis

// Snowpack automatically converts CommonJS to ESM
import _ from 'lodash'; // Works even though lodash is CommonJS
import React from 'react';
import { render } from 'react-dom';

// Dynamic imports
const dynamicModule = await import('./dynamic-module.js');

Aliases de colis

// snowpack.config.js
module.exports = {
  alias: {
    // Path aliases
    '@': './src',
    '@components': './src/components',
    '@utils': './src/utils',

    // Package aliases
    'react': 'preact/compat',
    'react-dom': 'preact/compat',
  },
};

Remplacement du module à chaud

RSM de base

// src/index.js
import './App.js';

// Accept HMR updates
if (import.meta.hot) {
  import.meta.hot.accept();
}

Composante HMR

// src/App.js
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

// HMR for React components (handled by plugin)
if (import.meta.hot) {
  import.meta.hot.accept();
}

API HMR

// Advanced HMR usage
if (import.meta.hot) {
  // Accept updates to this module
  import.meta.hot.accept();

  // Accept updates to dependencies
  import.meta.hot.accept('./dependency.js', (newModule) => {
    // Handle the updated dependency
    console.log('Dependency updated:', newModule);
  });

  // Dispose callback
  import.meta.hot.dispose((data) => {
    // Cleanup before module is replaced
    data.someState = getCurrentState();
  });

  // Invalidate and force full reload
  import.meta.hot.invalidate();
}

HMR CSS

/* src/styles.css */
.app {
  background-color: #f0f0f0;
  padding: 20px;
}

/* Changes to CSS are automatically hot-reloaded */

// src/index.js
import './styles.css';

// CSS changes are automatically handled by Snowpack

Support de script de type

Script de type de base Configuration

# Install TypeScript
npm install --save-dev typescript @snowpack/plugin-typescript

# Create tsconfig.json
npx tsc --init

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-typescript',
  ],
};

Configuration du script de type

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

TypeScript avec réaction

// src/App.tsx
import React, { useState } from 'react';

interface Props {
  title: string;
}

const App: React.FC<Props> = ({ title }) => {
  const [count, setCount] = useState<number>(0);

  const handleIncrement = (): void => {
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>
        Increment
      </button>
    </div>
  );
};

export default App;

Définitions de type

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

export interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

export type Theme = 'light' | 'dark';

CSS et styling

CSS Modules

// snowpack.config.js
module.exports = {
  plugins: [
    [
      '@snowpack/plugin-postcss',
      {
        config: {
          plugins: [
            require('postcss-modules')({
              generateScopedName: '[name]__[local]___[hash:base64:5]',
            }),
          ],
        },
      },
    ],
  ],
};

/* src/Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// src/Button.js
import styles from './Button.module.css';

function Button({ children, onClick }) {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

Sass/SCSS Appui

# Install Sass plugin
npm install --save-dev @snowpack/plugin-sass

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-sass',
  ],
};

// src/styles.scss
$primary-color: #007bff;
$font-size-base: 1rem;

@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-size: $font-size-base;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

.primary-button {
  @include button-style($primary-color);
}

PostCSS Configuration

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

/* src/styles.css */
@import 'normalize.css';

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;

  &:hover {
    background-color: color-mod(var(--primary-color) shade(10%));
  }
}

Gestion des actifs

Actifs statiques

// snowpack.config.js
module.exports = {
  mount: {
    public: { url: '/', static: true },
    'src/assets': { url: '/assets', static: true },
  },
};

Importations d'images

// src/App.js
import logoUrl from './assets/logo.png';
import iconUrl from './assets/icon.svg';

function App() {
  return (
    <div>
      <img src={logoUrl} alt="Logo" />
      <img src={iconUrl} alt="Icon" />
    </div>
  );
}

Importations dynamiques

// Dynamic asset loading
async function loadImage(imageName) {
  const imageModule = await import(`./assets/${imageName}.png`);
  return imageModule.default;
}

// Usage
const logoUrl = await loadImage('logo');
document.getElementById('logo').src = logoUrl;

Traitement des biens

// snowpack.config.js
module.exports = {
  plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          config.module.rules.push({
            test: /\.(png|jpe?g|gif|svg)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                  outputPath: 'images',
                },
              },
            ],
          });
          return config;
        },
      },
    ],
  ],
};

Variables d'environnement

Variables d'environnement de base

# .env
SNOWPACK_PUBLIC_API_URL=https://api.example.com
SNOWPACK_PUBLIC_APP_NAME=My App
PRIVATE_KEY=secret123

// src/config.js
export const config = {
  apiUrl: import.meta.env.SNOWPACK_PUBLIC_API_URL,
  appName: import.meta.env.SNOWPACK_PUBLIC_APP_NAME,
  // Private variables are not available in browser
};

Plugin Environnement

// snowpack.config.js
module.exports = {
  plugins: [
    '@snowpack/plugin-dotenv',
  ],
};

Variables d'environnement personnalisées

// snowpack.config.js
module.exports = {
  packageOptions: {
    env: {
      NODE_ENV: true,
      API_URL: true,
      VERSION: process.env.npm_package_version,
    },
  },
};

// src/app.js
console.log('Environment:', import.meta.env.NODE_ENV);
console.log('API URL:', import.meta.env.API_URL);
console.log('Version:', import.meta.env.VERSION);

Optimisation

Optimisation des ensembles

// snowpack.config.js
module.exports = {
  optimize: {
    bundle: true,
    minify: true,
    target: 'es2018',
    treeshake: true,
    splitting: true,
    manifest: true,
  },
};

Intégration du paquet Web

// snowpack.config.js
module.exports = {
  plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          config.optimization = {
            splitChunks: {
              chunks: 'all',
              cacheGroups: {
                vendor: {
                  test: /[\\/]node_modules[\\/]/,
                  name: 'vendors',
                  chunks: 'all',
                },
              },
            },
          };
          return config;
        },
      },
    ],
  ],
  optimize: {
    bundle: true,
    minify: true,
  },
};

Optimisation des performances

// src/utils/lazy.js
export const lazyLoad = (importFunc) => {
  return React.lazy(importFunc);
};

// src/App.js
import React, { Suspense } from 'react';
import { lazyLoad } from './utils/lazy';

const LazyComponent = lazyLoad(() => import('./components/HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Fractionnement du code

// Dynamic imports for code splitting
const loadDashboard = () => import('./pages/Dashboard');
const loadProfile = () => import('./pages/Profile');

// Router with code splitting
const routes = [
  {
    path: '/dashboard',
    component: React.lazy(loadDashboard),
  },
  {
    path: '/profile',
    component: React.lazy(loadProfile),
  },
];

Déploiement

Déploiement statique

# Build for production
npm run build

# Deploy build folder to static hosting
# (Netlify, Vercel, GitHub Pages, etc.)

Déploiement net

# netlify.toml
[build]
  publish = "build"
  command = "npm run build"

[build.environment]
  NODE_VERSION = "16"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Déploiement de Vercel

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "handle": "filesystem"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Pages GitHub

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm ci

    - name: Build
      run: npm run build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./build

Déploiement Docker

# Dockerfile
FROM node:16-alpine as build

WORKDIR /app
COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Migrations

De l'application Create React

# Remove react-scripts
npm uninstall react-scripts

# Install Snowpack
npm install --save-dev snowpack @snowpack/plugin-react-refresh

# Update package.json scripts
{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "web-test-runner \"src/**/*.test.js\""
  }
}

À partir de Webpack

// Convert webpack.config.js to snowpack.config.js
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    // Add other plugins as needed
  ],
  alias: {
    // Convert webpack aliases
    '@': './src',
  },
};

Liste de contrôle des migrations

  • Installez Snowpack et retirez l'ancien paquet
  • Créer snowpack.config.js
  • Mettre à jour les scripts paquet.json
  • Convertir les options de configuration
  • Mettre à jour les chemins d'importation si nécessaire
  • Mettre au point et construire des processus
  • Mettre à jour les pipelines CI/CD

Dépannage

Questions communes

Résolution du module

// Issue: Module not found
// Solution: Check mount configuration
module.exports = {
  mount: {
    src: { url: '/dist' },
    // Make sure all source directories are mounted
  },
  alias: {
    // Add aliases for complex paths
    '@': './src',
  },
};

HMR ne fonctionne pas

// Issue: Hot reloading not working
// Solution: Ensure HMR is enabled and modules accept updates
if (import.meta.hot) {
  import.meta.hot.accept();
}

// In snowpack.config.js
module.exports = {
  devOptions: {
    hmr: true,
  },
};

Créer des erreurs

# Issue: Build fails
# Solution: Check for unsupported features
snowpack build --verbose

# Clear cache
rm -rf node_modules/.cache

Compatibilité des paquets

// Issue: Package doesn't work with Snowpack
// Solution: Add to external packages or use polyfills
module.exports = {
  packageOptions: {
    external: ['problematic-package'],
    polyfillNode: true,
  },
};

Configuration de débogage

// snowpack.config.js
module.exports = {
  devOptions: {
    output: 'dashboard', // Better debugging output
  },
  buildOptions: {
    sourcemap: true, // Enable source maps
  },
  packageOptions: {
    source: 'local', // Use local packages for debugging
  },
};

Meilleures pratiques

Structure du projet

# Recommended structure
src/
├── components/          # Reusable components
├── pages/              # Page components
├── hooks/              # Custom hooks
├── utils/              # Utility functions
├── styles/             # Global styles
├── assets/             # Static assets
├── types/              # TypeScript types
└── index.js           # Entry point

Meilleures pratiques en matière de rendement

  • Utilisez les modules ES pour mieux secouer les arbres
  • Doublure du code d'exécution pour les grandes applications
  • Optimiser les images et les actifs
  • Engagement du groupement pour les bâtiments de production
  • Utilisez le chargement paresseux pour les composants lourds

Meilleures pratiques de développement

  • Utilisez TypeScript pour une meilleure expérience de développement
  • Activer le HMR pour un développement plus rapide
  • Configurer les alias pour les importations plus propres
  • Utiliser les variables d'environnement pour la configuration
  • **Traitement et mise en forme

Meilleures pratiques de production

  • Activer l'optimisation pour les constructions de production
  • Utiliser CDN pour les actifs statiques
  • ** Stratégies de mise en place**
  • ** Taille du faisceau de moniteurs** et performances
  • Construits d'essai avant déploiement

Résumé

Snowpack est un outil de construction de frontend rapide à la foudre qui exploite les modules ES pour une expérience de développement optimale. Les principales caractéristiques sont les suivantes :

  • ** Développement dégroupé**: Serve des fichiers individuels pendant le développement pour le démarrage instantané
  • ES Module First: Support natif pour les modules JavaScript
  • Écosystà ̈me Plugin: Riche écosystème de plugins pour différents cadres
  • Remplacement du module hôte: RSM rapide pour les mises à jour instantanées
  • TypeScript Support: compilation de TypeScript intégrée
  • Cadre Agnostic: Fonctionne avec Réact, Vue, Svelte, et plus
  • ** Optimisation de la production**: Bundle et optimiser pour la production
  • ** Configuration simple**: Configuration minimale requise

En tirant parti de la vitesse et de la simplicité de Snowpack, vous pouvez améliorer considérablement votre flux de travail de développement tout en conservant d'excellentes performances de production.