Moqueta de nieve Cheatsheet¶

¶

▪h1⁄2 - La herramienta de construcción de Frontend más rápida "Clase de inscripción" Snowpack es una herramienta de construcción de relámpago rápido, diseñada para la web moderna. Aprovecha el sistema de módulos nativos de JavaScript (ESM) para evitar un trabajo innecesario y mantenerse rápido sin importar cuán grande sea su proyecto. ▪/p] ■/div titulada

¶

########################################################################################################################################################################################################################################################## Copiar todos los comandos¶

########################################################################################################################################################################################################################################################## Generar PDF seleccionado/button¶

■/div titulada ■/div titulada

Cuadro de contenidos¶

Instalación¶

Instalación global¶

# Install Snowpack globally
npm install -g snowpack

# Check version
snowpack --version

Instalación local (recomendada)¶

# Initialize npm project
npm init -y

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

# Or with Yarn
yarn add --dev snowpack

Crear Snowpack App¶

# 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

Paquete.json Scripts¶

{
  "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}\""
  }
}

Comienzo¶

Estructura básica del proyecto¶

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

HTML básico Punto de entrada¶

<!-- 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>

JavaScript básico Entrada¶

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

console.log('Hello Snowpack!');

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

Basic CSS¶

/* 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;
}

Desarrollo inicial¶

# 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

Configuración¶

Configuración básica¶

// 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: {
    /* ... */
  },
};

Configuración avanzada¶

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

Configuración TipoScript¶

// 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"
  ]
}

Development Server¶

Basic Development Server¶

# 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

Opciones de desarrollo del servidor¶

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

Configuración 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);
      },
    },
  ],
};

Servidor personalizado¶

// 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();

Proceso de construcción¶

Basic Build¶

# 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

Configuración de construcción¶

// 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,
  },
};

Optimización de la producción¶

// 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
  },
};

Custom Build Script¶

// 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);

Plugins¶

Plugins esenciales¶

# 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

React 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 TipoScript¶

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

Sass Plugin¶

// 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 Plugin¶

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

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

Webpack Plugin¶

// 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 personalizado¶

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

Gestión de paquetes¶

Instalación de paquetes¶

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

# Snowpack will automatically handle ESM conversion

Configuración del paquete¶

// 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 Manipulación de paquetes¶

// 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');

Paquete Aliases¶

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

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

Reemplazamiento del módulo caliente¶

HMR básico¶

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

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

Componente 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();
}

HMR API¶

// 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();
}

CSS HMR¶

/* 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

Soporte TipoScript¶

Tipos básicos Configuración¶

# 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',
  ],
};

Configuración TipoScript¶

// 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"
  ]
}
```_

### TipoScript con React
```tsx
// 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;

Definición¶

// 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 y Styling¶

CSS Módulos¶

// 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 Apoyo
```bash
# 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 Configuración¶

// 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%));
  }
}

Asset Handling¶

Activos estaticos¶

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

Importaciones de imagen¶

// 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>
  );
}

Importaciones dinámicas¶

// 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;

Procesamiento de activos¶

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

Medio ambiente¶

Variables básicas del medio ambiente¶

# .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
};

Environment Plugin¶

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

Variables para el medio ambiente¶

// 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);

Optimización¶

Optimización del envase¶

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

Integración Webpack¶

// 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,
  },
};

Optimización del rendimiento¶

// 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>
  );
}

Código de división¶

// 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),
  },
];
```_

## Despliegue

### Despliegue estatico
```bash
# Build for production
npm run build

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

Netlify Deployment¶

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

[build.environment]
  NODE_VERSION = "16"

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

Despliegue de Vercel¶

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

Páginas de 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

Docker Deployment¶

# 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;"]

Migración¶

De la aplicación Crear 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\""
  }
}

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',
  },
};

Lista de control de migración¶

Instalar Snowpack y quitar el viejo paquete
Crear snowpack.config.js
Paquete de actualización.json scripts
Convertir opciones de configuración
Actualizar las rutas de importación si es necesario
Probar desarrollo y construir procesos
Actualizar tuberías CI/CD

Solución de problemas¶

Cuestiones comunes¶

Resolución¶

// 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 No está trabajando¶

// 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,
  },
};

Errores de construcción¶

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

# Clear cache
rm -rf node_modules/.cache

Compatibilidad¶

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

Configuración de depuración¶

// 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
  },
};

Buenas prácticas¶

Estructura del proyecto¶

# 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

Prácticas óptimas de rendimiento¶

Use módulos ES para un mejor afeitado de árboles
Separación de código de implementación para aplicaciones grandes
Optimizar imágenes y activos
** Ampliación de la capacidad** para la producción
Use carga perezosa para componentes pesados

Development Best Practices¶

Use TipoScript para una mejor experiencia de desarrollo
** HMR habilitable** para un desarrollo más rápido
Configure alias for cleaner imports
Utilizar variables de entorno para la configuración
Set up linting y formatear

Producción Buenas Prácticas¶

** Optimización de la producción**
Use CDN para activos estáticos
Estrategias de caché de la aplicación
** Tamaño del paquete de monitor** y rendimiento
Test construye antes del despliegue

-...

Resumen¶

Snowpack es una herramienta de construcción de frontend rápido que aprovecha los módulos ES para una experiencia de desarrollo óptima. Las características principales incluyen:

Desarrollo sin límites: Servi archivos individuales durante el desarrollo para la puesta en marcha instantánea
ES Módulo Primero: Soporte nativo para módulos JavaScript
Plugin Ecosystem: Ecosistema rico de plugins para diversos marcos
** Reemplazamiento del módulo de arranque**: HMR rápido para actualizaciones instantáneas
TypeScript Support: Compilación de tipoScript incorporada
Framework Agnostic: Funciona con React, Vue, Svelte y más
** Optimización de producción**: Agrupación y optimización para la producción
Configuración sencilla: Configuración mínima requerida

Al aprovechar la velocidad y la sencillez de Snowpack, puede mejorar significativamente su flujo de trabajo de desarrollo manteniendo un excelente rendimiento de producción.

" copia de la funciónToClipboard() {} comandos const = document.querySelectorAll('code'); que todos losCommands = '; comandos. paraCada(cmd = confianza allCommands += cmd.textContent + '\n'); navigator.clipboard.writeText(allCommands); alerta ('Todos los comandos copiados a portapapeles!'); }

función generaPDF() { ventana.print(); } ■/script título