Parcel

什么是 Parcel？

Parcel 是一个网页应用打包器，旨在通过开箱即用的零配置设置简化开发过程。它提供了更高级打包器中常见的功能，同时注重易用性，使其成为希望快速入门的开发者的理想选择。

设置

我们正在从零开始使用 Bootstrap 构建一个 Parcel 项目，因此在真正开始之前有一些前提条件和初步步骤。本指南要求你已安装 Node.js，并对终端有一定的了解。

1. 创建一个项目文件夹并设置 npm。 我们将创建 my-project 文件夹并使用npm初始化 -y 避免它向我们提出所有互动问题的论点。

   壳

             mkdir my-project && cd my-project
   npm init -y
           

2. 安装 Parcel。 与我们的 Webpack 指南不同，这里只有一个构建工具依赖。Parcel 会在检测到语言转换器（如 Sass）时自动安装它们。我们使用 --save-dev 表示该依赖仅用于开发，而不是用于生产环境。

   壳

             npm i --save-dev parcel
           

3. 安装 Bootstrap。 现在我们可以安装 Bootstrap。由于我们的一些组件依赖它们，我们还将安装 Floating UI 和 Vanilla Calendar Pro。如果你不打算使用菜单、弹出框或工具提示，可以省略 Floating UI。如果你不打算使用日期选择器，可以省略 Vanilla Calendar Pro。

   壳

             npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
           

现在我们已经安装了所有必要的依赖项，我们可以开始创建项目文件并导入 Bootstrap 了。

项目结构

我们已经创建了 my-project 文件夹并初始化了 npm。现在我们还将创建我们的 src 文件夹、样式表和 JavaScript 文件，以完善项目结构。从 my-project 运行以下命令，或手动创建下面显示的文件夹和文件结构。

          mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss
        

完成后，你的完整项目应该看起来像这样：

          my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json
        

此时，一切都已就绪，但 Parcel 需要一个 HTML 页面和 npm 脚本来启动我们的服务器。

配置 Parcel

在安装了依赖项并且我们的项目文件夹已经准备好开始编码之后，我们现在可以配置 Parcel 并在本地运行我们的项目。Parcel 本身按设计不需要配置文件，但我们确实需要一个 npm 脚本和一个 HTML 文件来启动我们的服务器。

1. 填写 src/index.html 文件。 Parcel 需要一个页面来渲染，所以我们使用我们的 index.html 页面用来设置一些基本的 HTML，包括我们的 CSS 和 JavaScript 文件。

   HTML

             <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap w/ Parcel</title>
       <link rel="stylesheet" href="scss/styles.scss">
       <script type="module" src="js/main.js"></script>
     </head>
     <body>
       <div class="container py-4 px-3 mx-auto">
         <h1>Hello, Bootstrap and Parcel!</h1>
         <button class="btn-solid theme-primary">Primary button</button>
       </div>
     </body>
   </html>
           

   我们在这里加入了一点 Bootstrap 样式 div class="container" 和 <button> 这样我们就能看到 Bootstrap 的 CSS 何时被 Parcel加载。

   Parcel 会自动检测我们正在使用 Sass 并安装 Sass Parcel 插件 来支持它。不过，如果你愿意，你也可以手动运行 npm i --save-dev @parcel/transformer-sass.

2. 添加 Parcel npm 脚本。 打开 package.json 并添加以下内容 start 到……的剧本 scripts 对象。我们将使用这个脚本来启动我们的 Parcel 开发服务器，并在它编译完成后渲染我们创建的 HTML 文件 dist 目录

   JSON

             {
      // ...
      "scripts": {
        "start": "parcel serve src/index.html --public-url / --dist-dir dist",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      // ...
   }
           

3. 最后，我们可以启动 Parcel。 从 my-project 在你的终端中的文件夹里，运行那个新添加的 npm 脚本：

   壳

             npm start
           

   

在本指南的下一节也是最后一节中，我们将导入所有的 Bootstrap CSS 和 JavaScript。

导入 Bootstrap

将 Bootstrap 导入 Parcel 需要两次导入，一次到我们的 styles.scss，一次到我们的 main.js。

1. 导入 Bootstrap 的 CSS。 添加以下内容到 src/scss/styles.scss 导入所有 Bootstrap 的源 Sass。

   SCSS

             // Import all of Bootstrap’s CSS
   @use "bootstrap/scss/bootstrap";
           

   如果你愿意，你也可以单独导入我们的样式表。 阅读我们的 Sass 导入文档 详情请参阅。

2. 导入 Bootstrap 的 JS。 将以下内容添加到 src/js/main.js 导入所有 Bootstrap 的 JS。Floating UI 和 Vanilla Calendar Pro 将通过 Bootstrap 自动导入。

   JavaScript

             // Import all of Bootstrap’s JS
   import * as bootstrap from 'bootstrap'
           

   你也可以根据需要单独导入 JavaScript 插件，以保持包的大小较小：

   JavaScript

             import Alert from 'bootstrap/js/dist/alert'
   
   // or, specify which plugins you need:
   import { Tooltip, Toast, Popover } from 'bootstrap'
           

   阅读我们的 JavaScript 文档 有关如何使用 Bootstrap 插件的更多信息。

3. 你完成了！🎉 在 Bootstrap 的源 Sass 和 JS 完全加载后，你的本地开发服务器现在应该看起来像这样：

   

   现在你可以开始添加你想使用的任何 Bootstrap 组件。请确保 查看完整的 Parcel 示例项目 关于如何包含额外的自定义 Sass，并通过仅导入所需的 Bootstrap CSS 和 JS 部分来优化构建。

在这里看到错误或过时的信息了吗？请 在 GitHub 上提交问题。需要帮助排查问题吗？在 GitHub 上搜索或发起讨论。