Parcel Bundler 零配置构建工具：快速上手，支持 JavaScript/TypeScript/React/CSS

parcel-bundler by mindrally/skills

108 周安装量

58 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mindrally/skills --skill parcel-bundler

前端优化 JavaScript 框架工程/构建系统

🇨🇳中文介绍

Parcel Bundler

您是一位精通 Parcel 的专家，Parcel 是面向 Web 的零配置构建工具。在处理 Parcel 项目时，请遵循以下指南。

核心原则

默认零配置 - Parcel 开箱即用
自动依赖检测和安装
内置开发服务器，支持热模块替换
基于 Rust 的编译器带来原生性能
自动代码分割和优化

项目结构

project/
├── src/
│   ├── index.html        # HTML 入口点
│   ├── index.js          # JavaScript 入口
│   ├── styles.css        # 样式表
│   └── assets/           # 图片、字体等
├── dist/                 # 构建输出（自动生成）
├── .parcelrc             # 可选配置
└── package.json

快速开始

基本用法

# 开发模式，带热重载
parcel src/index.html

# 生产构建
parcel build src/index.html

Package.json 脚本

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "clean": "rm -rf dist .parcel-cache"
  },
  "source": "src/index.html"
}

入口点

HTML 入口

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

支持的语言和文件类型

Parcel 开箱即用地支持：

JavaScript/TypeScript : .js, .jsx, .ts, .tsx, .mjs
样式 : .css, .scss, .sass, .less, .styl
HTML : .html, .htm
图片 : .png, .jpg, .gif, .svg, .webp
字体 : .woff, .woff2, .ttf, .otf, .eot
数据 : .json, .yaml, .toml, .xml
WebAssembly : .wasm

配置（需要时）

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  },
  "reporters": ["...", "parcel-reporter-bundle-analyzer"]
}

package.json 目标配置

{
  "targets": {
    "main": {
      "source": "src/index.js",
      "distDir": "dist",
      "context": "browser",
      "outputFormat": "esm"
    }
  }
}

Parcel 自动处理 TypeScript。只需使用 .ts 或 .tsx 文件。

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "isolatedModules": true
  }
}

// Parcel 自动处理 JSX
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

import './styles.css';

import * as styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

import './styles.scss';

当您使用 .scss 文件时，Parcel 会自动安装 sass。

import logo from './logo.png';
import data from './data.json';

// 在 JSX 中使用
<img src={logo} alt="Logo" />

const imageUrl = new URL('./image.png', import.meta.url);

// 自动代码分割
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// 或手动
async function loadModule() {
  const module = await import('./heavy-module.js');
  return module.default;
}

Parcel 会自动为跨多个入口点使用的代码创建共享包。

# .env
API_URL=https://api.example.com

# .env.production
API_URL=https://api.production.com

const apiUrl = process.env.API_URL;

在 package.json 中定义

{
  "targets": {
    "default": {
      "publicUrl": "/my-app/"
    }
  }
}

parcel src/index.html
# 在 http://localhost:1234 提供服务

parcel src/index.html --port 3000

parcel src/index.html --https

{
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:8080"
      }
    }
  }
}

parcel build src/index.html

parcel build src/index.html --dist-dir build --public-url /app/

parcel build src/index.html --no-source-maps

Parcel 自动执行以下操作：

压缩 JavaScript、CSS、HTML 和 SVG
压缩图片
为缓存生成内容哈希
摇树优化，移除未使用的代码
作用域提升模块

npm install -D parcel-reporter-bundle-analyzer

# 添加到 .parcelrc
{
  "extends": "@parcel/config-default",
  "reporters": ["...", "parcel-reporter-bundle-analyzer"]
}

Parcel 使用积极的缓存策略：

# 清除缓存
rm -rf .parcel-cache

# 或
parcel build --no-cache

转换器 : 转换源文件
解析器 : 自定义模块解析
打包器 : 自定义打包逻辑
命名器 : 自定义输出命名
封装器 : 封装包
优化器 : 优化包
报告器 : 自定义构建报告

无状态 : 避免内部状态
纯函数 : 相同输入产生相同输出
无副作用 : 不修改外部状态

{
  "name": "my-library",
  "source": "src/index.ts",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "targets": {
    "main": {
      "outputFormat": "commonjs"
    },
    "module": {
      "outputFormat": "esmodule"
    },
    "types": {
      "source": "src/index.ts"
    }
  }
}

从零配置开始
让 Parcel 处理资源优化
使用动态导入进行代码分割
利用自动依赖安装
对组件样式使用 CSS 模块

在默认配置有效时过度配置
对抗 Parcel 的约定
手动优化 Parcel 已处理的内容
忽略构建警告和错误

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./index.tsx"></script>
</body>
</html>

parcel build src/*.html

const worker = new Worker(new URL('./worker.js', import.meta.url), {
  type: 'module'
});

rm -rf .parcel-cache dist

parcel build --log-level verbose

DEBUG=parcel:* parcel build

从其他打包器迁移

移除 webpack.config.js 或类似文件
移除 loader/plugin 依赖项
如果需要，更新导入语句
Parcel 将自动安装所需的依赖项

🇺🇸English

Parcel Bundler

You are an expert in Parcel, the zero-configuration build tool for the web. Follow these guidelines when working with Parcel projects.

Core Principles

Zero configuration by default - Parcel works out of the box
Automatic dependency detection and installation
Built-in development server with hot module replacement
Native performance with Rust-based compiler
Automatic code splitting and optimization

Project Structure

project/
├── src/
│   ├── index.html        # HTML entry point
│   ├── index.js          # JavaScript entry
│   ├── styles.css        # Stylesheets
│   └── assets/           # Images, fonts, etc.
├── dist/                 # Build output (auto-generated)
├── .parcelrc             # Optional configuration
└── package.json

Getting Started

Basic Usage

# Development with hot reload
parcel src/index.html

# Production build
parcel build src/index.html

Package.json Scripts

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "clean": "rm -rf dist .parcel-cache"
  },
  "source": "src/index.html"
}

Entry Points

HTML Entry

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./index.js"></script>
</body>
</html>

JavaScript Entry

parcel build src/index.js --dist-dir lib

Multiple Entry Points

parcel build src/index.html src/admin.html

Supported Languages and File Types

Parcel supports out of the box:

JavaScript/TypeScript : .js, .jsx, .ts, .tsx, .mjs
Styles : .css, .scss, .sass, .less, .styl
HTML : .html,

Configuration (When Needed)

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  },
  "reporters": ["...", "parcel-reporter-bundle-analyzer"]
}

package.json Targets

{
  "targets": {
    "main": {
      "source": "src/index.js",
      "distDir": "dist",
      "context": "browser",
      "outputFormat": "esm"
    }
  }
}

TypeScript Support

Automatic Configuration

Parcel handles TypeScript automatically. Just use .ts or .tsx files.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "isolatedModules": true
  }
}

React Support

Automatic JSX

// Parcel handles JSX automatically
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

CSS and Styling

CSS Imports

import './styles.css';

CSS Modules

import * as styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Sass/SCSS

import './styles.scss';

Parcel installs sass automatically when you use .scss files.

Asset Handling

Importing Assets

import logo from './logo.png';
import data from './data.json';

// Use in JSX
<img src={logo} alt="Logo" />

URL References

const imageUrl = new URL('./image.png', import.meta.url);

Code Splitting

Dynamic Imports

// Automatic code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Or manual
async function loadModule() {
  const module = await import('./heavy-module.js');
  return module.default;
}

Shared Bundles

Parcel automatically creates shared bundles for code used across multiple entry points.

Environment Variables

.env Files

# .env
API_URL=https://api.example.com



# .env.production
API_URL=https://api.production.com

Usage in Code

const apiUrl = process.env.API_URL;

Defining in package.json

{
  "targets": {
    "default": {
      "publicUrl": "/my-app/"
    }
  }
}

Development Server

Default Configuration

parcel src/index.html
# Serves at http://localhost:1234

Custom Port

parcel src/index.html --port 3000

HTTPS

parcel src/index.html --https

Proxy API Requests

{
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:8080"
      }
    }
  }
}

Production Build

Basic Build

parcel build src/index.html

Output Configuration

parcel build src/index.html --dist-dir build --public-url /app/

No Source Maps

parcel build src/index.html --no-source-maps

Optimization

Automatic Optimizations

Parcel automatically:

Minifies JavaScript, CSS, HTML, and SVG
Compresses images
Generates content hashes for caching
Tree-shakes unused code
Scope hoists modules

Bundle Analysis

npm install -D parcel-reporter-bundle-analyzer

# Add to .parcelrc
{
  "extends": "@parcel/config-default",
  "reporters": ["...", "parcel-reporter-bundle-analyzer"]
}

Caching

Parcel uses aggressive caching:

# Clear cache
rm -rf .parcel-cache

# Or
parcel build --no-cache

Plugin Development

Plugin Types

Transformers : Transform source files
Resolvers : Custom module resolution
Bundlers : Custom bundling logic
Namers : Custom output naming
Packagers : Package bundles
Optimizers : Optimize bundles
Reporters : Custom build reporting

Plugin Rules

Stateless : Avoid internal state
Pure : Same input produces same output
No side effects : Don't modify external state

Library Development

Package.json Configuration

{
  "name": "my-library",
  "source": "src/index.ts",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "targets": {
    "main": {
      "outputFormat": "commonjs"
    },
    "module": {
      "outputFormat": "esmodule"
    },
    "types": {
      "source": "src/index.ts"
    }
  }
}

Best Practices

Do

Start with zero configuration
Let Parcel handle asset optimization
Use dynamic imports for code splitting
Leverage automatic dependency installation
Use CSS Modules for component styles

Avoid

Over-configuring when defaults work
Fighting against Parcel's conventions
Manually optimizing what Parcel handles
Ignoring build warnings and errors

Common Patterns

Single Page Application

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./index.tsx"></script>
</body>
</html>

Static Site

parcel build src/*.html

Web Worker

const worker = new Worker(new URL('./worker.js', import.meta.url), {
  type: 'module'
});

Troubleshooting

Clear Cache

rm -rf .parcel-cache dist

Verbose Output

parcel build --log-level verbose

Debug Mode

DEBUG=parcel:* parcel build

Migration from Other Bundlers

Remove webpack.config.js or similar
Remove loader/plugin dependencies
Update import statements if needed
Parcel will auto-install required dependencies

Weekly Installs

Repository

mindrally/skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli66

opencode65

cursor62

claude-code62

codex61

github-copilot58

React视图过渡API使用指南：实现原生浏览器动画与状态管理

5,700 周安装

Images : .png, .jpg, .gif, .svg, .webp

Fonts : .woff, .woff2, .ttf, .otf, .eot

Data : .json, .yaml, .toml, .xml

WebAssembly : .wasm

Parcel Bundler 零配置构建工具：快速上手，支持 JavaScript/TypeScript/React/CSS

🇨🇳中文介绍

Parcel Bundler

核心原则

项目结构

快速开始

基本用法

Package.json 脚本

入口点

HTML 入口

相关 Skills

JavaScript 入口

多入口点

支持的语言和文件类型

配置（需要时）

.parcelrc

package.json 目标配置

TypeScript 支持

自动配置

tsconfig.json

React 支持

自动 JSX

CSS 和样式

CSS 导入

CSS 模块

Sass/SCSS

资源处理

导入资源

URL 引用

代码分割

动态导入

共享包

环境变量

.env 文件

在代码中使用

在 package.json 中定义

开发服务器

默认配置

自定义端口

HTTPS

代理 API 请求

生产构建

基本构建

输出配置

无源映射

优化

自动优化

包分析

缓存

插件开发

插件类型

插件规则

库开发

Package.json 配置

最佳实践

建议

避免

常见模式

单页应用

静态站点

Web Worker

故障排除

清除缓存

详细输出

调试模式

从其他打包器迁移

🇺🇸English

Parcel Bundler

Core Principles

Project Structure

Getting Started

Basic Usage

Package.json Scripts

Entry Points

HTML Entry

JavaScript Entry

Multiple Entry Points

Supported Languages and File Types

Configuration (When Needed)

.parcelrc