Parcel Cheatsheet¶
Parcel - Das Zero Configuration Build Tool
_Parcel ist ein Web-Anwendungsbündelr, differenziert durch seine Entwicklererfahrung. Es bietet schnelle Leistung mit Multicore-Verarbeitung und erfordert Null-Konfiguration.
_
Inhaltsverzeichnis - (#Installation) - (#getting-started) - Projektstruktur - (#Entwicklungsserver) - Building for Production - (#asset-Typen) - (#Transformationen) - Code Splitting - (#hot-Modul-Ersatz) - Umweltvariablen - (Plugins) (#plugins) - (#configuration) - Optimierung - (Targets) - (Caching) (#caching) - (#source-maps) - (#Bundle-Analyse) - (Migration) (#migration) - (#best-practices)
• Installation
Globale Installation¶
# Install Parcel globally
npm install -g parcel
# Or with Yarn
yarn global add parcel
# Check version
parcel --version
```_
### Lokale Installation (empfohlen)
```bash
# Initialize npm project
npm init -y
# Install Parcel as dev dependency
npm install --save-dev parcel
# Or with Yarn
yarn add --dev parcel
```_
### Paket.json Scripts
```json
{
"scripts": {
"start": "parcel src/index.html",
"dev": "parcel src/index.html --open",
"build": "parcel build src/index.html",
"clean": "rm -rf dist .parcel-cache"
}
}
```_
Gestartet
### Basic HTML Eingangsstelle
```html
<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Parcel App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
```_
### Grundlegendes JavaScript Eintragung
```javascript
// src/index.js
import './styles.css';
console.log('Hello from Parcel!');
// Import and use a module
import { greet } from './utils';
greet('World');
```_
### Basic CSS
```css
/* src/styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
```_
### Run Development Server
```bash
# Start development server
npm start
# Or with specific port
parcel src/index.html --port 3000
# Open browser automatically
parcel src/index.html --open
```_
Projektstruktur
### Typisches Paketprojekt
```bash
my-parcel-app/
├── src/
│ ├── index.html
│ ├── index.js
│ ├── styles.css
│ ├── components/
│ │ ├── Header.js
│ │ └── Footer.js
│ ├── assets/
│ │ ├── images/
│ │ └── fonts/
│ └── utils/
│ └── helpers.js
├── dist/ # Build output
├── .parcel-cache/ # Parcel cache
├── package.json
└── .gitignore
```_
### Mehrere Entry Points
```json
{
"scripts": {
"start": "parcel src/*.html",
"build": "parcel build src/*.html"
}
}
```_
### Bibliothek Projektstruktur
```bash
my-library/
├── src/
│ ├── index.js
│ ├── components/
│ └── utils/
├── package.json
└── .parcelrc
```_
Der Entwicklungsserver
### Basic Development Server
```bash
# Start dev server
parcel src/index.html
# Custom port
parcel src/index.html --port 8080
# Custom host
parcel src/index.html --host 0.0.0.0
# HTTPS
parcel src/index.html --https
# Open browser
parcel src/index.html --open
```_
### Entwicklungsserver Optionen
```bash
# Disable HMR
parcel src/index.html --no-hmr
# Disable source maps
parcel src/index.html --no-source-maps
# Custom dist directory
parcel src/index.html --dist-dir build
# Watch additional files
parcel src/index.html --watch-dir src/data
```_
### Proxy Configuration
```json
// package.json
{
"scripts": {
"start": "parcel src/index.html --port 3000"
},
"@parcel/resolver-default": {
"packageExports": true
}
}
```_
Gebäude für Produktion
### Basic Production Build
```bash
# Build for production
parcel build src/index.html
# Build with custom output directory
parcel build src/index.html --dist-dir build
# Build without source maps
parcel build src/index.html --no-source-maps
# Build without optimization
parcel build src/index.html --no-optimize
```_
### Konfigurieren erstellen
```json
{
"scripts": {
"build": "parcel build src/index.html",
"build:analyze": "parcel build src/index.html --reporter @parcel/reporter-bundle-analyzer",
"build:stats": "parcel build src/index.html --reporter @parcel/reporter-bundle-buddy"
}
}
```_
### Produktionsoptimierungen
```bash
# Enable scope hoisting
parcel build src/index.html --experimental-scope-hoisting
# Custom public URL
parcel build src/index.html --public-url /my-app/
# Detailed bundle report
parcel build src/index.html --detailed-report
```_
Vermögenswerte
### JavaScript und TypeScript
```javascript
// ES6 modules
import { helper } from './utils/helper.js';
// CommonJS
const lodash = require('lodash');
// Dynamic imports
const module = await import('./dynamic-module.js');
// TypeScript
import { Component } from './Component.ts';
```_
### CSS und Preprozessoren
```css
/* CSS imports */
@import './normalize.css';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
/* CSS modules */
.container {
composes: flex from './layout.css';
background: var(--primary-color);
}
```_
```scss
// SCSS
@import './variables';
.component {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}
// Less
@import './variables.less';
.component {
background: @primary-color;
&:hover {
background: darken(@primary-color, 10%);
}
}
Bilder und Assets¶
// Import images
import logo from './assets/logo.png';
import icon from './assets/icon.svg';
// Use in HTML
document.getElementById('logo').src = logo;
// CSS background images
.hero {
background-image: url('./assets/hero.jpg');
}
```_
### Schriften
```css
/* Font imports */
@font-face {
font-family: 'CustomFont';
src: url('./assets/fonts/custom-font.woff2') format('woff2'),
url('./assets/fonts/custom-font.woff') format('woff');
}
body {
font-family: 'CustomFont', sans-serif;
}
```_
### JSON und Datendateien
```javascript
// Import JSON
import data from './data.json';
import config from './config.json';
// Import text files
import template from './template.html';
import shader from './shader.glsl';
```_
Transformationen
### Babel Configuration
```json
// .babelrc
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
]
}
```_
### PostCSS Konfiguration
```javascript
// .postcssrc
{
"plugins": {
"autoprefixer": {
"grid": true
},
"cssnano": {
"preset": "default"
}
}
}
```_
### TypeScript Configuration
```json
// tsconfig.json
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
```_
### React Configuration
```javascript
// React component
import React from 'react';
import './Component.css';
export default function Component({ title }) {
return (
<div className="component">
<h1>{title}</h1>
</div>
);
}
```_
### Vue Configuration
```vue
<!-- Vue component -->
<template>
<div class="component">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>
<style scoped>
.component {
padding: 20px;
}
</style>
```_
Code Splitting
### Dynamische Importe
```javascript
// Dynamic import for code splitting
async function loadModule() {
const { default: Module } = await import('./heavy-module.js');
return new Module();
}
// React lazy loading
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
```_
### Bundle Splitting
```javascript
// Vendor bundle splitting
import React from 'react';
import ReactDOM from 'react-dom';
import lodash from 'lodash';
// App code
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
```_
### Routenbasierte Splitting
```javascript
// React Router with code splitting
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Suspense, lazy } from 'react';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
```_
/ Hot Modul Ersatz
### HMR in JavaScript
```javascript
// Enable HMR for a module
if (module.hot) {
module.hot.accept('./component.js', function() {
// Re-render component
render();
});
}
// HMR with state preservation
if (module.hot) {
module.hot.accept();
if (module.hot.data) {
// Restore state
restoreState(module.hot.data.state);
}
module.hot.dispose((data) => {
// Save state
data.state = getCurrentState();
});
}
```_
### React HMR
```javascript
// React Fast Refresh (automatic with Parcel)
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
export default App;
```_
### CSS HMR
```css
/* CSS changes are automatically hot reloaded */
.component {
background: blue; /* Change this and see instant update */
padding: 20px;
border-radius: 8px;
}
```_
Umweltvariablen
### Verwenden von Umweltvariablen
```javascript
// Access environment variables
const apiUrl = process.env.API_URL || 'http://localhost:3000';
const isDevelopment = process.env.NODE_ENV === 'development';
console.log('API URL:', apiUrl);
console.log('Development mode:', isDevelopment);
```_
### .env Dateien
```bash
# .env
API_URL=https://api.example.com
FEATURE_FLAG=true
DEBUG=false
```_
```bash
# .env.development
API_URL=http://localhost:3000
DEBUG=true
Umweltspezifisch Bauten¶
{
"scripts": {
"start": "NODE_ENV=development parcel src/index.html",
"build": "NODE_ENV=production parcel build src/index.html",
"build:staging": "NODE_ENV=staging parcel build src/index.html"
}
}
```_
In den Warenkorb
### Plugins installieren
```bash
# Install common plugins
npm install --save-dev @parcel/transformer-sass
npm install --save-dev @parcel/transformer-less
npm install --save-dev @parcel/transformer-stylus
npm install --save-dev @parcel/transformer-typescript
```_
### Plugin Configuration
```json
// .parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
"*.scss": ["@parcel/transformer-sass"]
},
"reporters": ["@parcel/reporter-dev-server", "@parcel/reporter-bundle-analyzer"]
}
```_
### Individuelle Plugins
```javascript
// parcel-plugin-custom.js
const { Transformer } = require('@parcel/plugin');
module.exports = new Transformer({
async transform({ asset }) {
const code = await asset.getCode();
// Transform the code
const transformedCode = customTransform(code);
asset.setCode(transformedCode);
return [asset];
}
});
```_
### Beliebte Plugins
```bash
# Bundle analyzer
npm install --save-dev @parcel/reporter-bundle-analyzer
# Service worker
npm install --save-dev parcel-plugin-sw-precache
# Compression
npm install --save-dev parcel-plugin-compress
# Clean dist
npm install --save-dev parcel-plugin-clean-dist
```_
Konfiguration
### Basic .parcelrc
```json
{
"extends": "@parcel/config-default",
"transformers": {
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"@parcel/transformer-js",
"@parcel/transformer-react-refresh-wrap"
]
}
}
```_
### Erweiterte Konfiguration
```json
{
"extends": "@parcel/config-default",
"resolvers": ["@parcel/resolver-default"],
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
"*.{js,jsx}": ["@parcel/transformer-js"],
"*.{css,scss,sass}": ["@parcel/transformer-sass", "@parcel/transformer-css"],
"*.{html,htm}": ["@parcel/transformer-html"]
},
"bundler": "@parcel/bundler-default",
"namers": ["@parcel/namer-default"],
"runtimes": ["@parcel/runtime-js", "@parcel/runtime-browser-hmr"],
"optimizers": {
"*.{js,mjs,jsm,jsx,ts,tsx}": ["@parcel/optimizer-terser"],
"*.{css,scss,sass}": ["@parcel/optimizer-css"]
},
"packagers": {
"*.html": "@parcel/packager-html",
"*.{js,mjs,jsm,jsx,ts,tsx}": "@parcel/packager-js",
"*.{css,scss,sass}": "@parcel/packager-css"
},
"compressors": {
"*": ["@parcel/compressor-gzip"]
},
"reporters": ["@parcel/reporter-dev-server"]
}
```_
### Zielkonfiguration
```json
// package.json
{
"targets": {
"default": {
"distDir": "dist"
},
"modern": {
"engines": {
"browsers": "Chrome 80"
}
},
"legacy": {
"engines": {
"browsers": "> 1%"
}
}
}
}
```_
Optimierung
### Produktionsoptimierungen
```bash
# Build with optimizations
parcel build src/index.html
# Disable optimizations
parcel build src/index.html --no-optimize
# Enable experimental optimizations
parcel build src/index.html --experimental-scope-hoisting
```_
### Bundle Size Optimization
```javascript
// Tree shaking (automatic with ES modules)
import { debounce } from 'lodash-es';
// Avoid importing entire libraries
import debounce from 'lodash/debounce';
// Use dynamic imports for large dependencies
async function loadChart() {
const { Chart } = await import('chart.js');
return Chart;
}
```_
### Bildoptimierung
```html
<!-- Automatic image optimization -->
<img src="./image.jpg" alt="Optimized image" />
<!-- WebP support -->
<picture>
<source srcset="./image.webp" type="image/webp">
<img src="./image.jpg" alt="Image with WebP fallback">
</picture>
```_
### CSS Optimierung
```css
/* Automatic CSS optimization */
.component {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* PostCSS plugins handle vendor prefixes */
.modern-feature {
backdrop-filter: blur(10px);
}
```_
Ziele
### Browser Targets
```json
// package.json
{
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
```_
### Node.js Ziel
```json
{
"targets": {
"node": {
"context": "node",
"engines": {
"node": ">= 12"
}
}
}
}
```_
### Library Target
```json
{
"targets": {
"library": {
"source": "src/index.js",
"distDir": "lib"
}
}
}
```_
### Mehrere Ziele
```json
{
"targets": {
"modern": {
"engines": {
"browsers": "Chrome 80"
},
"distDir": "dist/modern"
},
"legacy": {
"engines": {
"browsers": "> 1%"
},
"distDir": "dist/legacy"
}
}
}
```_
♪ Caching
### Build Caching
```bash
# Cache location
.parcel-cache/
# Clear cache
rm -rf .parcel-cache
# Disable cache
parcel build src/index.html --no-cache
```_
### HTTP Caching
```javascript
// Automatic content hashing for long-term caching
// Output: main.a1b2c3d4.js
// Service worker for caching
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
```_
### Cache Configuration
```json
{
"cacheDir": ".cache",
"cache": true
}
```_
Quelle Maps
### Quelle Map Konfiguration
```bash
# Enable source maps (default in development)
parcel src/index.html
# Disable source maps
parcel src/index.html --no-source-maps
# Production source maps
parcel build src/index.html --source-maps
```_
### Quelle Kartentypen
```json
// .parcelrc
{
"extends": "@parcel/config-default",
"optimizers": {
"*.js": {
"sourceMap": {
"inline": false,
"inlineSources": true
}
}
}
}
```_
Analyse von Bundle
### Bundle Analyzer
```bash
# Install bundle analyzer
npm install --save-dev @parcel/reporter-bundle-analyzer
# Build with analyzer
parcel build src/index.html --reporter @parcel/reporter-bundle-analyzer
Bundle Buddy¶
```bash
Install bundle buddy¶
npm install --save-dev @parcel/reporter-bundle-buddy
Generate bundle buddy report¶
parcel build src/index.html --reporter @parcel/reporter-bundle-buddy ```_
Individuelle Analyse¶
```javascript // analyze-bundle.js const fs = require('fs'); const path = require('path');
function analyzeBundles() { const distDir = path.join(__dirname, 'dist'); const files = fs.readdirSync(distDir);
files.forEach(file => {
const filePath = path.join(distDir, file);
const stats = fs.statSync(filePath);
console.log(${file}: ${(stats.size / 1024).toFixed(2)} KB);
});
}
analyzeBundles(); ```_
Migration
From Webpack¶
```javascript // webpack.config.js (remove this file) // Parcel handles most webpack functionality automatically
// Update package.json scripts { "scripts": { "start": "parcel src/index.html", "build": "parcel build src/index.html" } } ```_
From Create React App¶
```bash
Remove react-scripts¶
npm uninstall react-scripts
Install Parcel¶
npm install --save-dev parcel
Update scripts¶
{ "scripts": { "start": "parcel public/index.html", "build": "parcel build public/index.html" } } ```_
From Rollup¶
```javascript // Remove rollup.config.js // Update package.json
{ "source": "src/index.js", "main": "dist/index.js", "scripts": { "build": "parcel build" } } ```_
Migration Checklist¶
- Entfernen Sie alte Paketer Konfigurationsdateien
- Update Paket.json scripts
- Installieren Sie Paket und entfernen Sie alte Bündelr
- Importpfade nach Bedarf aktualisieren
- Konfigurieren .parcelrc, wenn benutzerdefinierte Transformationen benötigt werden
- Testentwicklung und Produktionsaufbau
- Update CI/CD Pipelines
oder Best Practices
Projektorganisation¶
```bash
Recommended structure¶
src/ ├── index.html # Entry point ├── index.js # Main JavaScript ├── styles/ # Global styles ├── components/ # Reusable components ├── pages/ # Page components ├── utils/ # Utility functions ├── assets/ # Static assets └── types/ # TypeScript types ```_
Performance Best Practices¶
- ** Dynamische Importe** zur Codespaltung
- **Optimieren Sie Bilder* mit entsprechenden Formaten
- Minimize Bündelgröße mit Baumschütteln
- Einstellbare Kompression für Produktionsanlagen
- **Verwenden von Inhalten ** für Caching
Entwicklung Best Practices¶
- ** Verwenden Sie HMR** für schnellere Entwicklung
- ** Quellkarten aktivieren* für Debugging
- **Konfigurieren Sie Linting* mit ESLint und Prettier
- Use TypeScript für bessere Entwicklungserfahrung
- **Einrichten von Tests* mit Jest oder anderen Frameworks
Produktion Best Practices¶
- Optimieren Sie für Zielbrowser mit Browserliste
- ** Alle Optimierungen** in Produktionsgebäuden aktivieren
- ** Verwenden Sie Umgebungsvariablen* für Konfiguration
- Monitor Bündelgröße mit Analysewerkzeugen
- ** Test baut** vor dem Einsatz
--
Zusammenfassung
Parcel ist ein Zero-Configuration Build-Tool, das eine ausgezeichnete Entwicklererfahrung mit minimalem Setup bietet. Zu den wichtigsten Merkmalen gehören:
- **Zero Konfiguration*: Arbeitet aus der Box für die meisten Projekte
- **Fast Builds*: Verwendet Multicore-Verarbeitung und Caching
- **Hot Modul Ersatz*: Instant Updates während der Entwicklung
- Asset Handling: Unterstützt alle gängigen Dateitypen
- Code Splitting: Automatische und manuelle Codespaltung
- Tree Shaking: Entfernt ungenutzten Code automatisch
- **Quelle Maps*: Eingebaute Quellkartenunterstützung
- ** Optimierung**: Automatische Produktionsoptimierungen
Durch den Einsatz von Parcels Einfachheit und Leistung können Sie sich auf den Aufbau Ihrer Anwendung konzentrieren, anstatt Bauwerkzeuge zu konfigurieren, während Sie noch die Flexibilität haben, bei Bedarf anzupassen.
_