使用 Parcel 构建 Web 应用

安装

¥Installation

在开始之前，你需要安装 Node 和 Yarn 或 npm，并为你的项目创建一个目录。然后，使用 Yarn 将 Parcel 安装到你的应用中：

¥Before we get started, you'll need to install Node and Yarn or npm, and create a directory for your project. Then, install Parcel into your app using Yarn:

yarn add --dev parcel

或者使用 npm 运行时：

¥Or when using npm run:

npm install --save-dev parcel

项目设置

¥Project setup

现在 Parcel 已安装，让我们为我们的应用创建一些源文件。Parcel 接受任何类型的文件作为入口点，但 HTML 文件是一个不错的起点。Parcel 将遵循你的所有依赖来构建你的应用。

¥Now that Parcel is installed, let’s create some source files for our app. Parcel accepts any type of file as an entry point, but an HTML file is a good place to start. Parcel will follow all of your dependencies from there to build your app.

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：

¥Parcel has a development server built in, which will automatically rebuild your app as you make changes. To start it, run the parcel CLI pointing to your entry file:

yarn parcel src/index.html

或者使用 npm 运行时：

¥Or when using npm run:

npx parcel src/index.html

现在在浏览器中打开 http://localhost:1234/ 以查看上面创建的 HTML 文件。

¥Now open http://localhost:1234/ in your browser to see the HTML file you created above.

接下来，你可以开始向 HTML 文件添加依赖，例如 JavaScript 或 CSS 文件。例如，你可以创建 styles.css 文件并使用 <link> 标签从 index.html 文件引用它，并使用 <script> 标签引用 app.js 文件。

¥Next, you can start adding dependencies to your HTML file, such as a JavaScript or CSS file. For example, you could create a styles.css file and reference it from your index.html file with a <link> tag, and an app.js file referenced with a <script> tag.

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>

当你进行更改时，你应该会看到你的应用在浏览器中自动更新，甚至无需刷新页面！

¥As you make changes, you should see your app automatically update in the browser without even refreshing the page!

在此示例中，我们展示了如何使用普通 HTML、CSS 和 JavaScript，但 Parcel 还可以与许多常见的 Web 框架和语言（例如开箱即用的 React 和 TypeScript）配合使用。查看文档的秘诀和语言部分以了解更多信息。

¥In this example, we’ve shown how to use vanilla HTML, CSS, and JavaScript, but Parcel also works with many common web frameworks and languages like React and TypeScript out of the box. Check out the Recipes and Languages sections of the docs to learn more.

包脚本

¥Package scripts

到目前为止，我们一直在直接运行 parcel CLI，但在 package.json 文件中创建一些脚本可以使这变得更容易。我们还将设置一个脚本来使用 parcel build 命令构建生产的应用。最后，你还可以使用 source 字段在单个位置声明入口，这样你就不需要在每个 parcel 命令中重复它们。

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

现在，你可以运行 yarn build 来构建生产项目，并运行 yarn start 来启动开发服务器。

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

声明浏览器目标

¥Declaring browser targets

默认情况下，Parcel 不执行任何代码转译。这意味着，如果你使用现代语言功能编写代码，那么 Parcel 将输出这样的内容。你可以使用 browserslist 字段声明你的应用支持的浏览器。声明此字段后，Parcel 将相应地转译你的代码，以确保与你支持的浏览器的兼容性。

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

你可以在目标页面上了解有关目标的更多信息，以及 Parcel 对差异打包的自动支持。

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

下一步

¥Next steps

现在你已经设置了项目，你可以了解 Parcel 的一些更高级的功能。查看有关开发和生产的文档，并查看“秘诀”和“语言”部分，以获取使用流行 Web 框架和工具的更深入指南。

¥Now that you’ve set up your project, you're ready to learn about some more advanced features of Parcel. Check out the documentation about development and production, and see the Recipes and Languages sections for more in-depth guides using popular web frameworks and tools.