Building a web app with Parcel

安装

在开始之前，你需要先把 Node 和 Yarn（或 npm）安装好，并为你的项目创建一个目录。然后，使用 Yarn 来安装 Parcel：

yarn add --dev parcel

或者使用 npm 来安装 Parcel：

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 的命令行工具，并将入口文件作为参数传递给它：

yarn parcel src/index.html

或者使用 npm 系列工具来运行：

npx parcel src/index.html

现在，在浏览器中打开 http://localhost:1234/ 地址并查看前面所创建的 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>

当你修改这些文件时，你将看到应用程序将自动更新，甚至无需手动刷新页面！

在本例中，我们展示了如何让 Parcel 处理使用普通的 HTML、CSS 和 JavaScript 文件，但是，Parcel 还可以在无需任何设置的情况下与许多常见的 web 框架及编程语言协同工作，例如 React 和 TypeScript。请查看本文档中的 Recipes 和 Languages 章节以了解更多内容。

Package scripts

So far, we’ve been running the parcel CLI directly, but it can be useful to create some scripts in your package.json file to make this easier. We'll also setup a script to build your app for production using the parcel build command. Finally, you can also declare your entries in a single place using the source field so you don't need to duplicate them in each parcel command.

package.json:

{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

Now you can run yarn build to build your project for production and yarn start to start the development server.

Declaring browser targets

By default Parcel does not perform any code transpilation. This means that if you write your code using modern language features, that’s what Parcel will output. You can declare your app’s supported browsers using the browserslist field. When this field is declared, Parcel will transpile your code accordingly to ensure compatibility with your supported browsers.

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"
  }
}

You can learn more about targets, as well as Parcel’s automatic support for differential bundling on the Targets page.

接下来

现在，你已经设置好项目并准备学习 Parcel 的高级功能了。请查看有关开发环境和生产环境章节的文档，并查看 Recipes 和 Languages 章节，以便深入了解如何使用流行的 web 框架和工具。