parcel-bundler by mindrally/skills
npx skills add https://github.com/mindrally/skills --skill parcel-bundler您是一位精通 Parcel 的专家,Parcel 是面向 Web 的零配置构建工具。在处理 Parcel 项目时,请遵循以下指南。
project/
├── src/
│ ├── index.html # HTML 入口点
│ ├── index.js # JavaScript 入口
│ ├── styles.css # 样式表
│ └── assets/ # 图片、字体等
├── dist/ # 构建输出(自动生成)
├── .parcelrc # 可选配置
└── package.json
# 开发模式,带热重载
parcel src/index.html
# 生产构建
parcel build src/index.html
{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html",
"clean": "rm -rf dist .parcel-cache"
},
"source": "src/index.html"
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<!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>
parcel build src/index.js --dist-dir lib
parcel build src/index.html src/admin.html
Parcel 开箱即用地支持:
.js, .jsx, .ts, .tsx, .mjs.css, .scss, .sass, .less, .styl.html, .htm.png, .jpg, .gif, .svg, .webp.woff, .woff2, .ttf, .otf, .eot.json, .yaml, .toml, .xml.wasm{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["@parcel/transformer-svg-react"]
},
"reporters": ["...", "parcel-reporter-bundle-analyzer"]
}
{
"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;
{
"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 自动执行以下操作:
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"
}
}
}
<!-- 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
每周安装次数
81
代码仓库
GitHub 星标数
43
首次出现
2026年1月25日
安全审计
安装于
gemini-cli66
opencode65
cursor62
claude-code62
codex61
github-copilot58
You are an expert in Parcel, the zero-configuration build tool for the web. Follow these guidelines when working with Parcel projects.
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
# Development with hot reload
parcel src/index.html
# Production build
parcel build src/index.html
{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html",
"clean": "rm -rf dist .parcel-cache"
},
"source": "src/index.html"
}
<!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>
parcel build src/index.js --dist-dir lib
parcel build src/index.html src/admin.html
Parcel supports out of the box:
.js, .jsx, .ts, .tsx, .mjs.css, .scss, .sass, .less, .styl.html, {
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["@parcel/transformer-svg-react"]
},
"reporters": ["...", "parcel-reporter-bundle-analyzer"]
}
{
"targets": {
"main": {
"source": "src/index.js",
"distDir": "dist",
"context": "browser",
"outputFormat": "esm"
}
}
}
Parcel handles TypeScript automatically. Just use .ts or .tsx files.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"isolatedModules": true
}
}
// Parcel handles JSX automatically
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';
Parcel installs sass automatically when you use .scss files.
import logo from './logo.png';
import data from './data.json';
// Use in JSX
<img src={logo} alt="Logo" />
const imageUrl = new URL('./image.png', import.meta.url);
// Automatic code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));
// Or manual
async function loadModule() {
const module = await import('./heavy-module.js');
return module.default;
}
Parcel automatically creates shared bundles for code used across multiple entry points.
# .env
API_URL=https://api.example.com
# .env.production
API_URL=https://api.production.com
const apiUrl = process.env.API_URL;
{
"targets": {
"default": {
"publicUrl": "/my-app/"
}
}
}
parcel src/index.html
# Serves at 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 automatically:
npm install -D parcel-reporter-bundle-analyzer
# Add to .parcelrc
{
"extends": "@parcel/config-default",
"reporters": ["...", "parcel-reporter-bundle-analyzer"]
}
Parcel uses aggressive caching:
# Clear cache
rm -rf .parcel-cache
# Or
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"
}
}
}
<!-- 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
Weekly Installs
81
Repository
GitHub Stars
43
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli66
opencode65
cursor62
claude-code62
codex61
github-copilot58
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装
TorchTitan:PyTorch原生分布式大语言模型预训练平台,支持4D并行与H100 GPU加速
69 周安装
screenshot 截图技能:跨平台桌面截图工具,支持macOS/Linux权限管理与多模式捕获
69 周安装
tmux进程管理最佳实践:交互式Shell初始化、会话命名与生命周期管理
69 周安装
Git Rebase Sync:安全同步分支的Git变基工具,解决冲突与备份
69 周安装
LinkedIn自动化工具 - Claude Code专属,自然对话拓展人脉,避免垃圾信息
69 周安装
实验流水线框架:4阶段科研实验执行与消融研究方法论 | EvoScientist
69 周安装
.htm.png, .jpg, .gif, .svg, .webp.woff, .woff2, .ttf, .otf, .eot.json, .yaml, .toml, .xml.wasm