Parcel 中文文档 | Parcel 中文网
GitHub：
本文档持续翻译中，有想帮忙(希望有人)翻译的小伙伴也可参与哦
使用 Parcel 构建 Web 应用程序
安装
在开始之前，您需要安装 Node 和 Yarn 或 npm，并为您的项目创建一个目录。然后，使用 Yarn 将 Parcel 安装到您的应用程序中：
yarn add --dev parcel
或者在使用 npm 运行时：
npm install --save-dev parcel项目设置
现在已经安装了 Parcel，让我们为我们的应用程序创建一些源文件。Parcel 接受任何类型的文件作为入口点，但 HTML 文件是一个很好的起点。Parcel 将从那里遵循您的所有依赖项来构建您的应用程序。
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First Parcel App</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Parcel 内置了一个开发服务器，它会在您进行更改时自动重建您的应用程序。要启动它，请运行 parcel 指向您的入口文件的 CLI：
yarn parcel src/index.html或者在使用 npm 运行时：
npx parcel src/index.html现在在浏览器中打开
接下来，您可以开始将依赖项添加到您的 HTML 文件，例如 JavaScript 或 CSS 文件。您可以创建一个 styles.css ，在 index.html 使用 <link> 标签引用，或者一个 app.js 文件使用 <script> 标签引入。
src/styles.css:
h1 {
color: hotpink;
font-family: cursive;
}src/app.js:
console.log("Hello world!");src/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My First Parcel App</title>
<link rel="stylesheet" href="styles.css" />
<script type="module" src="app.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>当您进行更改时，您应该会在浏览器中看到您的应用程序自动更新，甚至无需刷新页面！
在这个例子中，我们展示了如何使用普通的 HTML、CSS 和 JavaScript，但 Parcel 也可以与许多常见的 Web 框架和语言一起使用，比如开箱即用的
打包脚本
到目前为止，我们一直在 parcel 直接运行 CLI，但在您的 package.json 文件中创建一些脚本以简化此操作会很有用。我们还将设置一个脚本来使用该命令构建您的应用程序以进行
package.json:
{
"name": "my-project",
"source": "src/index.html",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"devDependencies": {
"parcel": "latest"
}
}现在您可以运行 yarn build 以构建您生产环境的项目，使用 yarn start 启动开发环境。
声明浏览器目标
默认情况下，Parcel 不执行任何代码转换。这意味着如果您使用现代语言功能编写代码，这就是 Parcel 将输出的内容。您可以使用 browserslist 字段声明您的应用支持的浏览器。声明此字段时，Parcel 将相应地转译您的代码，以确保与您支持的浏览器兼容。
package.json:
{
"name": "my-project",
"source": "src/index.html",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"devDependencies": {
"parcel": "latest"
}
}您可以在
下一步
现在您已经设置了您的项目，您可以了解 Parcel 的一些更高级的功能。查看有关
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现