parcel能零配置启动，但仅限最简场景：根目录有index.html且通过script/link引入资源；涉及ts、jsx、自定义路径、环境变量等即需配置。
Parcel能真的零配置启动吗
可以，但仅限于最简场景：项目根目录下有 index.html，且其中通过 <script></script> 或 <link> 引入了 JS/CSS/图片等资源。Parcel 会自动识别入口并构建依赖图。
不写任何配置文件（如 parcelrc 或 package.json 中的 "main" 字段）也能跑起来，但一旦涉及以下情况，零配置就失效了：
- 使用 TypeScript、JSX、Vue 或 Svelte 等非原生语法
- 需要自定义 public 资源路径（比如把 favicon.ico 放在子目录）
- 输出目录不是默认的 dist
- 需要环境变量注入（process.env.NODE_ENV 可用，但自定义变量不行）
初始化项目时 npm script 怎么写才不踩坑
Parcel v2+ 不再全局安装，必须本地安装并走 npx 或 npm run 启动。常见错误是直接运行 parcel index.html 却没装包，报错 command not found: parcel。
正确做法：
- 运行 npm init -y && npm install --save-dev parcel@latest
- 在 package.json 的 scripts 中添加：
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}
注意：
- dev 模式默认监听所有 HTML 文件变化，但只以第一个参数（这里是 index.html）为入口；如果项目有多个页面，需显式列出或改用 parcel serve
- build 默认启用压缩和哈希，但不会自动复制未被引用的静态资源（比如 robots.txt），得手动加 --public-url ./ 或用插件
为什么 CSS @import 或图片 background-image 路径会 404
Parcel 默认只解析 JS 中的 import 和 HTML 中的 src/href，对 CSS 里的相对路径（尤其是 @import 和 url()）处理较弱，容易因路径解析上下文出错。
典型现象：
- styles.css 里写了 @import './reset.css';，但 reset.css 没被打包进去
- div { background: url('./img/logo.png'); } 编译后路径变成 url(/logo.abc123.png)，但实际部署在子路径下（如 /app/），导致 404
npx 或 npm run 启动。常见错误是直接运行 parcel index.html 却没装包，报错 command not found: parcel。
正确做法：
- 运行 npm init -y && npm install --save-dev parcel@latest
- 在 package.json 的 scripts 中添加：
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}
注意：
- dev 模式默认监听所有 HTML 文件变化，但只以第一个参数（这里是 index.html）为入口；如果项目有多个页面，需显式列出或改用 parcel serve
- build 默认启用压缩和哈希，但不会自动复制未被引用的静态资源（比如 robots.txt），得手动加 --public-url ./ 或用插件
为什么 CSS @import 或图片 background-image 路径会 404
Parcel 默认只解析 JS 中的 import 和 HTML 中的 src/href，对 CSS 里的相对路径（尤其是 @import 和 url()）处理较弱，容易因路径解析上下文出错。
典型现象：
- styles.css 里写了 @import './reset.css';，但 reset.css 没被打包进去
- div { background: url('./img/logo.png'); } 编译后路径变成 url(/logo.abc123.png)，但实际部署在子路径下（如 /app/），导致 404
解决方法：
- 所有 CSS
@import改用 JS 中import './reset.css' - 图片路径统一用 JS import 获取真实 URL：
import logo from './img/logo.png'; document.body.style.backgroundImage = <code>url(${logo}) - 或构建时加
--public-url ./参数，让所有资源路径变成相对路径
开发服务器代理 API 请求怎么配
Parcel 本身不内置代理功能，v2 开始移除了 proxy 字段支持。想转发 /api 到后端，必须借助插件或外部工具。
最轻量方案是用 parcel-plugin-proxy：
- 安装：npm install --save-dev parcel-plugin-proxy
- 创建 .proxyrc（注意是点开头）：
{
"/api": {
"target": "http://localhost:3000",
"changeOrigin": true
}
}
但要注意：
- .proxyrc 必须放在项目根目录，Parcel 才会读取
- 该插件只在 serve 模式生效，build 后无效（上线需 Nginx 或其他反向代理）
- 如果后端接口带 cookie，得加 "cookieDomainRewrite": "localhost"，否则跨域请求可能丢凭证
有些边界情况它压根不处理，比如 WebSocket 代理或动态路径重写——这时候不如直接切到 vite 或加个 http-proxy-middleware 自搭服务。
零配置的代价，就是灵活性锁死在 Parcel 认可的那几条路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
