今天，我们将讨论项目建设者（捆绑销售商），这些工具使开发者的工作更加轻松。 捆绑器工作的本质是，它们采用许多文件中包含的JavaScript代码并将其打包到一个或多个文件中，以某种方式对它们进行排序并为在浏览器中的工作做好准备。 此外，由于使用了各种插件（插件）和加载程序，因此可以使代码最小化，并且除了代码外，还可以打包其他资源（例如CSS文件和图像）。 捆绑器允许您使用预处理器，它们可以将代码拆分为片段，并在需要时加载。 但是他们的能力不限于此。 实际上，我们在谈论它们有助于组织开发过程的事实。
有很多捆扎机。 例如
-Browserify和
webpack 。 尽管这些项目构建者是很棒的工具，但我个人发现它们很难设置。 从哪里开始安装？ 这个问题对于初学者尤其重要，对于那些可能对“配置文件”概念有些害怕的人。
这就是为什么我通常使用
Parcel项目
构建器 。 当我在YouTube上观看一个培训视频时，偶然发现了这个捆绑软件。 有一些技巧可以加快开发速度。 该视频中显示的工作环境与Parcel紧密相关。 之后，我决定尝试使用该捆扎机。
包裹特征
我最喜欢Parcel的地方是它根本不需要任何配置。 没错：您不需要进行配置。 在这方面，Parcel胜过
webpack ，在
webpack中 ，设置可以分散在多个文件中，并且代表整个代码“表”。 设置webpack的开发人员可能已经从其他程序员的配置文件中获取了一些东西。 可能只是简单地从其他项目中完全复制了设置。 显然，配置的复杂性取决于开发人员，但是即使在为小型项目设置Webpack时，也需要使用一组特定的插件并安装特定的选项。
这就是为什么在我看来，使用包裹的妙计。 例如，如果开发人员计划使用SCSS或LESS风格化他的项目，那么他可以简单地编写适当的代码而无需进行任何不必要的移动。 是否要使用最新的JavaScript功能？ 如果是这样，您可以不考虑任何事情，而使用这些功能编写代码。 需要开发服务器吗？ 使用Parcel的人有这样的服务器。 实际上，在这里，我们几乎没有触及到Parcel强大
功能的冰山一角。
Parcel允许程序员在不浪费时间进行任何辅助工作的情况下，只需接手并开始项目的工作。 这是将其用作捆绑器的主要优点。 此外，Parcel使用多核处理器的功能可以非常快速地处理文件和构建项目，而其他打包程序（包括webpack）执行较慢和更复杂的代码转换的工作则较慢。
包裹的使用范围
与其他任何工具一样，宗地也不是一种通用工具，它始终适用于所有地方。 但是在某些情况下，Parcel特别成功。
我已经讨论过Parcel允许您输入运行中的项目的速度。 因此，它非常适合在狭窄的时间范围内工作并创建原型。 我们正在谈论的情况是时间很昂贵，而开发人员的目标是尽快创建可运行的应用程序。
这并不意味着Parcel不适合复杂的应用程序或大型程序员团队参与的项目。 在这种情况下，包裹表现良好。 但是，我意识到大型项目可以从手动调整工作流程中受益。
将不需要设置的捆绑器与需要配置的捆绑器进行比较的方法是如何比较自动变速箱和手动变速箱的汽车。 有时，驾驶员可能需要控制更多的细节，有时需要更少的细节。
我当时在一个多页网站上工作，其中包含很多JavaScript代码。 包裹在这个项目中表现良好。 他给了我一台服务器，用CSS编译了Sass，必要时在代码中添加了浏览器制造商的前缀，并允许使用JavaScript文件中的导出和导入命令，而无需进行任何设置。 所有这些极大地促进了我在该项目上的工作。
使用Parcel创建一个简单的网站
让我们安排一个包裹试驾。 这将使我们看到使用此捆绑器创建内容相对简单。 这是我们将要处理的页面。
试点项目页面我们将创建一个简单的站点，该站点将使用Sass和一些JavaScript。 我们将在网站页面上显示有关星期几的信息以及从
Unsplash Source下载的随机图像。
the项目基本结构
计划使用Parcel的项目不需要特殊的文件和文件夹结构。 它不必使用特定的框架。 该项目的基本结构将由三个文件组成，它们的名称说明一切。 这些是
index.html ，
style.scss和
index.js 。 您可以按照自己的方式创建它们。 例如，使用命令行：
mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js
在该项目功能所基于的
index.html文件中添加一些模板代码和标记：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.scss"> <title>Parcel Tutorial</title> </head> <body> <div class="container"> <h1>Today is:</h1> <span class="today"></span> <h2><font color="#3AC1EF">and the image of the day:</font></h2> <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html>
您可能已经注意到，这里我是从Google字体下载网络字体（
Lato ）。 自愿使用可下载的字体。 在这里值得注意的是连接CSS和JavaScript文件，以及连接到文档正文的HTML代码，该文档提供了用于输出有关星期几信息的位置以及用于从Unsplash输出随机图像的位置。 实际上，关于这项工作的项目的基本结构已经完成。
preparation包裹快速准备工作的奇迹
现在，在继续进行样式和脚本编写之前，让我们尝试使用Parcel运行我们的项目。 安装Parcel并没有什么异常：
npm install -g parcel-bundler # yarn global add parcel-bundler
现在使用npm或yarn初始化项目，这将导致创建
package.json文件：
npm init -y # yarn init -y
仅此而已！ 无需进一步设置。 剩下要做的就是告诉Parcel有关哪个文件是项目的入口点。 这将使捆绑程序能够找出他的服务器需要提供给客户端的内容。
在我们的例子中，这样的文件将是
index.html ：
parcel index.html
服务器成功启动后，控制台中将显示以下内容：
Server running at http://localhost:1234 √ Built in 13ms.
Parcel服务器支持热启动。 每次保存对项目文件所做的更改时，捆绑程序都会重新生成应用程序。
让我们回到项目文件夹。 在这里，您可以看到捆绑程序创建的新文件夹和文件。
捆绑器创建的新文件夹和文件我们对
dist文件夹特别感兴趣。 它包含所有已编译的代码，包括CSS和JavaScript的代码映射。
▍继续项目工作
让我们
style.scss文件，了解Parcel如何处理Sass代码。 我在这里创建了几个变量，用于存储放置页面内容的容器的颜色和宽度：
$container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929;
现在，在同一文件中，添加样式描述。 在这里您可以创建自己喜欢的东西。 例如，我这样做：
*, *::after, *::before { box-sizing: border-box; } body { background: $bg; color: $text; font-family: 'Lato', sans-serif; margin: 0; padding: 0; } .container { margin: 0 auto; max-width: $container-size; text-align: center; h1 { display: inline-block; font-size: 36px; } span { color: $primary-yellow; font-size: 36px; margin-left: 10px; } }
保存此文件后，Parcel将开始工作，编译所有内容并在浏览器中重新加载页面。 除了保存文件，我们不需要执行任何其他操作。 默认情况下，包裹监视文件更改。
这是样式设置后页面的外观。
程式化页面仅在此处显示星期几的名称。 在解决此问题的过程中，我们将使用
导入和
导出团队。 这将测试Parcel使用现代JavaScript机制的能力。
创建文件
today.js并从中导出一个函数，该函数使用带有星期几名称和当前天名称的数组返回：
export function getDay() { const today = new Date(); const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; return daysArr[today.getDay()]; }
请注意，
getDay函数
getDay一周
getDay第一天。
我们从
getDay导出了
today.js函数。 现在，我们进入
index.js文件，并将此函数从
today.js文件导入到其中。 这将导致在项目的组装过程中处理
today.js文件。
import { getDay } from './today';
无需任何其他设置的Parcel就支持
ES6模块的
语法 ，因此我们可以在JS文件中使用import和export命令。
现在我们只需要选择相应的
<span>元素，并将
getDay函数返回的值传递给
getDay 。 将以下代码添加到
index.html ：
const day = document.querySelector('.today'); day.innerHTML = getDay();
保存文件后，将重建项目，其在浏览器中的页面也会更改。
完成的项目▍建设生产项目
我们创建了应用程序，现在我们希望将其放置在某个地方。 它可以是我们自己的服务器，也可以是
Surge或
Now之类的东西，这使得发布Web项目尽可能简单。 同时，我们需要对项目代码进行编译和压缩。
为了使项目成为适合发布的形式，我们只需要一个命令：
parcel build index.html
运行此命令后，控制台将获得类似于下图所示的内容。
项目组装现在，我们可以使用应用程序的资源，准备将其部署到生产中。
在这里，您可以阅读有关Parcel如何收集项目的生产版本的详细信息，并找到一些技巧，这些技巧可以提高使用此捆绑器的效率。
总结
我已经说过几次了，但是我会再重复一遍：包裹是一个很棒的工具。 它允许您收集项目，编译代码，为开发服务器提供程序员，预处理和后处理资源，减少代码。 而且他的能力不限于此。 在这里，我们看了一个非常简单的示例，但是我希望它可以使您感受到Parcel的可能性，并有助于学习如何在项目中使用此捆绑器。
亲爱的读者们！ 您使用哪个捆绑器？
