js parcel_使用Parcel.js进行Web捆绑介绍

js parcel

Dominant JavaScript libraries like React.js make it seemingly easy to write front-end applications out-of-the-box. Have you ever wondered how React can transform your complex, multi-layered application into static HTML pages that can be accessed from any browser? Web bundlers play a vital role here. Let’s explore web bundlers together through a simple interactive example.

像React.js这样的主要JavaScript库使开箱即用地编写前端应用程序看起来很容易。 您是否曾经想过React如何将您复杂的多层应用程序转换为可以从任何浏览器访问的静态HTML页面？ Web捆绑器在这里起着至关重要的作用。 让我们通过一个简单的交互式示例一起探索Web捆绑器。

什么是网络捆绑？ (What is Web Bundling?)

Web bundling is the process of fetching, resolving, packing, reducing a tree of dependencies into compressed static files that you may readily host on the web. The original pioneering package in web bundling is the famous Webpack. Webpack provides a sophisticated configuration interface to allow the developer to customize certain stages in the web bundling pipeline.

Web捆绑是获取，解析，打包，将依赖关系树简化为可随时在网络上托管的压缩静态文件的过程。 Web捆绑中最初的开拓性软件包是著名的Webpack 。 Webpack提供了一个复杂的配置界面，允许开发人员自定义Web捆绑管道中的某些阶段。

For most mundane use cases, web bundling does not need explicit customization. This is where bundlers like Parcel.js come into the picture: Parcel.js allows you to bundle your web application with no configuration file. (note: Since Webpack 4, Webpack also offers basic web bundling with no configuration file.)

对于大多数普通的用例，Web捆绑不需要显式的自定义。 这是诸如Parcel.js的捆绑器出现的地方：Parcel.js允许您捆绑没有配置文件的 Web应用程序。 (注：从Webpack 4开始，Webpack还提供基本的Web捆绑，没有配置文件。)

网络捆绑的好处 (Benefits of Web Bundling)

Immediate benefits that we can draw from using web bundlers are:

我们可以从使用网络捆绑包中获得的直接好处是：

• Ability to scale without hurdles: Web bundlers can map out and bundle thousands and thousands of files that are linked with each other. You do not have to worry about adding complex build processes to accommodate the scale of your codebase.

  无障碍扩展能力 ：Web捆绑器可以映射并捆绑成千上万个彼此链接的文件。 您不必担心添加复杂的构建过程以适应代码库的规模。

• File compression: The web bundling process involves a compression stage, ultimately reducing the size of your website. This is great for your visitors (and your bandwidth meter).

  文件压缩： Web捆绑过程涉及压缩阶段，最终减小了网站的大小。 这对您的访客(和带宽计)非常有用。

• Safely use latest tech for the web: You can utilize packages from the NPM registry without worrying about how you can include hundreds of packages into the final build of your website.

  安全地使用网络上的最新技术：您可以使用NPM注册表中的软件包，而不必担心如何将数百个软件包包含在网站的最终版本中。

There are many more benefits, but these benefits are some of the highlights that you’ll immediately derive when you start using a web bundler. Now, let’s dive into using the Parcel.js web bundler with an interactive example of a website that computes the MD5 hash from a text field input.

还有很多好处，但是这些好处是您开始使用Web捆绑器时会立即获得的一些亮点。 现在，让我们深入研究如何将Parcel.js网络捆绑软件与一个网站的交互式示例结合使用，该示例从文本字段输入中计算MD5哈希值。

字符串到哈希：使用Parcel.js捆绑程序的简单示例 (String to Hash: Simple example using Parcel.js bundler)

(Source code available at https://github.com/ahmedsakr/bundling-with-parcel)

(源代码位于https://github.com/ahmedsakr/bundling-with-parcel )

I built a quick one-page application to compute the MD5 hash output of some text. Here is the file structure of the project:

我构建了一个快速的一页应用程序来计算某些文本的MD5哈希输出。 这是项目的文件结构：

The application required 3 separate files to bring it all together:

该应用程序需要3个单独的文件才能将它们组合在一起：

• Styling: I defined a style sheet style.css to provide some positioning and styling for the web page.

  样式：我定义了样式表style.css以提供网页的一些定位和样式。

• Functionality: I defined the MD5 hash computing logic transform.js which makes use of the md5 NPM package.

  功能：我定义了MD5哈希计算逻辑transform.js ，它使用了md5 NPM软件包。

• Web page markup: Finally, i brought together the whole application through the index.html markup.

  网页标记：最后，我通过index.html标记将整个应用程序整合在一起。

它看起来很简单，那么为什么需要网络捆绑器？ (It looks simple, so why do you need a web bundler?)

The necessity for a web bundler here is due to using the md5 NPM module. Let’s take a look at transform.js:

Web捆绑器的必要性是由于使用了md5 NPM模块。 让我们看一下transform.js ：

A core tenant of programming is to not re-invent the wheel. If i were to not use a web bundler, i would have to:

编程的核心租户是不要重新发明轮子。 如果我不使用网络捆绑软件，则必须：

• Manually copy the MD5 implementation files into my project and then link them somehow; or
  手动将MD5实现文件复制到我的项目中，然后以某种方式链接它们； 要么
• Implement the MD5 hash algorithm myself
  自己实现MD5哈希算法

Neither of these options are satisfactory. Option 1 would unsubscribe me from any future updates to the MD5 package. Option 2 would require tremendous useless effort into something that has already been done.

这些选择都不令人满意。 选项1将取消我对MD5软件包将来的任何更新的订阅。 选择2将需要付出大量无用的精力来完成已经完成的工作。

So, I chose to use the MD5 package on the NPM registry. However, web browsers do not recognize the ES6 import statement

因此，我选择在NPM注册表上使用MD5软件包。 但是，Web浏览器无法识别ES6导入语句

import md5 from 'md5'

Neither will they automatically look into node_modules for you. Web browsers want files to be explicitly and relatively specified.

他们也不会自动为您查找node_modules。 Web浏览器希望显式且相对地指定文件。

This is where web bundlers come to the rescue: web bundlers will automatically locate the appropriate implementation and bundle it into your application.

这是Web捆绑器抢救的地方：Web捆绑器将自动找到合适的实现并将其捆绑到您的应用程序中。

如何使用Parcel.js (How to use Parcel.js)

We now understand the necessity of web bundlers. Let’s dive into how to use Parcel.js for bundling our applications.

现在，我们了解了Web捆绑软件的必要性。 让我们深入研究如何使用Parcel.js捆绑我们的应用程序。

Step 1: Install parcel from the NPM registry

步骤1：从NPM注册表中安装包裹

Once you have your NPM project setup, you can install parcel with the following command:

设置好NPM项目后，可以使用以下命令安装包裹：

npm install --save-dev parcel

Step 2: Add an NPM script for bundling your application with Parcel.js

步骤2：添加NPM脚本以将您的应用程序与Parcel.js捆绑在一起

I have already mentioned how simple Parcel.js is. All you have to do is provide Parcel.js with the entry file (your main HTML file) and it will discover all the other files automatically. Here is the NPM Script I have in this project:

我已经提到过Parcel.js多么简单。 您要做的就是为Parcel.js提供入口文件(您的主HTML文件)，它将自动发现所有其他文件。 这是我在此项目中拥有的NPM脚本：

"bundle": "parcel build index.html --no-source-maps"

This command will direct Parcel.js to bundle my application, outputting the final files into a dist folder. The --no-source-maps flag tells Parcel.js to not build map files for JS and CSS files (map files are development files to allow you to view the original code in the browser)

此命令将指示Parcel.js捆绑我的应用程序，并将最终文件输出到dist文件夹中。 --no-source-maps标志告诉Parcel.js不要为JS和CSS文件构建映射文件(映射文件是开发文件，允许您在浏览器中查看原始代码)

When you run that script, Parcel.js will output the following:

运行该脚本时，Parcel.js将输出以下内容：

➜  bundling-with-parcel git:(master) ✗ npm run bundle                                                                                       > bundling-with-parcel@1.0.0 bundle /home/asakr/bundling-with-parcel
> parcel build index.html --no-source-maps✨  Built in 1.26s.dist/transform.909609cc.js    6.81 KB     57ms
dist/index.html                 502 B      8ms
dist/style.2158241e.css         363 B    735ms

Parcel.js scanned my index.html file, found that it provides references to style.css and transform.js , so it grabbed them and built them. When Parcel.js was building transform.js , it found that it makes use of an NPM module called md5 . It automatically pulled and bundled the relevant md5 implementation right into the final dist/transform.909609cc.js file that you see in the output above!

Parcel.js扫描了我的index.html文件，发现该文件提供了对style.css和transform.js引用，因此它抓住了它们并构建了它们。 当Parcel.js构建transform.js ，发现它利用了一个名为md5的NPM模块。 它会自动将相关的md5实现直接打包并捆绑到您在上面的输出中看到的最终dist/transform.909609cc.js文件中！

Using a web bundler, my website is now only 3 files!! how amazing is that??

使用网络捆绑包，我的网站现在只有3个文件 ！ 那有多神奇？

Feel free to take a look at the repository (https://github.com/ahmedsakr/bundling-with-parcel) to see the entirety of the codebase. You can also clone the repository and try running Parcel.js yourself. I hope this tutorial provided a reference point for you regarding the importance of web bundlers.

随时查看存储库( https://github.com/ahmedsakr/bundling-with-parcel )，以查看代码库的整体。 您也可以克隆存储库，然后尝试自己运行Parcel.js。 希望本教程为您提供有关Web捆绑软件重要性的参考。

翻译自: https://medium.com/swlh/intro-to-web-bundling-with-parcel-js-939bb2ebb7a1

js parcel