包裹类型_包裹，更简单的Webpack

包裹类型

Parcel is a Web Application Bundler.

Parcel是一个Web应用程序捆绑程序。

It’s in the same tool category of webpack, with a different value proposition.

它在webpack的同一工具类别中，具有不同的价值主张。

Its main features set includes

它的主要功能包括

• assets bundling (JS, CSS, HTML, images)
  资产捆绑(JS，CSS，HTML，图像)
• zero config code splitting
  零配置代码拆分

• automatic transforms using Babel, PostCSS and PostHTML

  使用Babel ， PostCSS和PostHTML自动转换

• hot module replacement
  热模块更换
• caching and parallel processing for faster builds
  缓存和并行处理以加快构建速度

Parcel promises to do all of this without any configuration at all, and be fast too.

Parcel承诺无需任何配置即可完成所有这些工作，而且速度也很快。

安装 (Installation)

Parcel is installed using Yarn:

使用Yarn安装包裹：

yarn global add parcel-bundler

or npm:

或npm ：

npm install -g parcel-bundler

启动包裹 (Start Parcel)

Parcel can be started using

包裹可以使用开始

parcel watch index.html

it will start scanning for assets from the HTML page source, and substitute any of the references it processes, with an output file.

它将开始从HTML页面源中扫描资产，并使用输出文件替换它处理的任何引用。

You can also point Parcel to a JS file instead:

您还可以将Parcel指向JS文件：

parcel watch entry.js

开发服务器 (Development server)

Conveniently Parcel comes with a built-in development server, so you don’t have to set up one. You can start it with:

方便的是，Parcel带有内置的开发服务器，因此您不必设置一个。 您可以从以下内容开始：

parcel index.html

生产就绪包 (Production-ready bundle)

When you’re happy with your app and you want to create a production-ready bundle, run

当您对应用程序满意并想要创建可用于生产环境的捆绑包时，请运行

parcel build index.html

A production bundle disables hot module replacement and does not watch your changes, it exists once the bundling is done, and uses a minifier.

生产捆绑包禁用热模块更换，并且不监视您的更改，生产捆绑包一旦存在，它就存在，并使用缩小器。

It also automatically trigger the NODE_ENV variable to production, to make libraries generate the production code (e.g. React and Vue use this convention)

它还会自动将NODE_ENV变量触发到production ，以使库生成生产代码(例如React和Vue使用此约定)

资产 (Assets)

JavaScript (JavaScript)

Parcel supports both ES Modules (import...) and CommonJS (require...).

Parcel同时支持ES模块 ( import... )和CommonJS ( require... )。

It performs automatic Code Splitting using dynamic imports.

它使用动态导入执行自动代码拆分 。

What does this mean, and why is this useful?

这是什么意思，为什么有用？

A dynamic import returns a promise, and instead of loading all the dependencies at the application start, we can ask the browser to load them, but only executes some parts of the app when they are ready.

动态导入会返回一个promise ，而不是在应用程序启动时加载所有依赖项，我们可以要求浏览器加载它们，但仅在它们准备就绪时才执行应用程序的某些部分。

Or, we can ask the browser to load them only when we need it, for example when the user clicks a particular link.

或者，我们可以要求浏览器仅在需要时才加载它们，例如，当用户单击特定链接时。

See code splitting for more details.

有关更多详细信息，请参见代码拆分 。

CSS (CSS)

Parcel supports plain CSS, Sass, Less and Stylus.

包裹支持普通CSS，Sass，Less和Stylus。

You can write your CSS using CSS Modules.

您可以使用CSS模块编写CSS 。

变身 (Transforms)

When Parcel finds you have a configuration for one of

当Parcel发现您具有以下任一配置时

• Babel (.babelrc)

  通天塔( .babelrc )

• PostCSS (.postcssrc)

  PostCSS( .postcssrc )

• PostHTML (.posthtmlrc)

  PostHTML( .posthtmlrc )

it will use that automatically in its bundling process.

它将在捆绑过程中自动使用它。

热模块更换 (Hot module replacement)

Hot module replacement (HMR) is a useful feature when building an application. When we save a new copy of CSS or JavaScript, HMR takes care of updating the module in the browser, without refreshing the whole application.

生成应用程序时，热模块更换(HMR)是有用的功能。 当我们保存CSS或JavaScript的新副本时，HMR将负责在浏览器中更新模块，而无需刷新整个应用程序。

This is cool especially if your application has lots of states you need to trigger to test a specific functionality (e.g. “go to settings, click this, type that…”).

这很酷，特别是如果您的应用程序具有许多状态，则需要触发这些状态来测试特定功能(例如，“进入设置，单击此项，键入...”)。

包裹与Webpack (Parcel vs webpack)

Let’s compare Parcel to webpack, because that’s so popular and you have probably heard of it or used it in a project. It’s also nice to know the differences even if you never used any of them.

让我们将Parcel与webpack进行比较，因为它是如此流行，并且您可能听说过或在项目中使用过它。 即使您从未使用过任何区别，也很高兴知道它们之间的区别。

webpack allows you to do tons of things, and while this is very cool, also means that we need to carefully configure it to do exactly what we want.

webpack允许您做很多事情，尽管这很酷，但也意味着我们需要仔细配置它以完全执行我们想要的事情。

Sometimes the webpack.config.js file grows to hundreds of lines, and we copy/paste it to the next project, and it’s a pain if we need to modify it.

有时webpack.config.js文件会增长到几百行，我们将其复制/粘贴到下一个项目中，如果需要修改它会很webpack.config.js 。

Parcel promises us to do a lot of what webpack does, but without any configuration at all, relying on conventions over configuration.

Parcel承诺我们会做很多webpack的工作，但是根本不需要任何配置 ，而是依靠约定而不是配置 。

webpack 4, mostly in response to the Parcel success, introduced a zero-config mode, with some conventions, rather than always requiring a configuration.

webpack 4主要是为了响应Parcel的成功，引入了零配置模式，并带有一些约定，而不是总是需要配置。

While webpack has thousands of plugins, Parcel has some, but they are not advertised on the site, a sign that developers of Parcel want us to avoid using plugins until we can’t really avoid them because we can’t adapt to the conventions of Parcel, or to make Parcel support something that it does not out of the box.

尽管webpack有成千上万个插件 ，但Parcel有一些 ，但并未在网站上发布，这表明Parcel的开发人员希望我们避免使用插件，直到我们不能真正避免使用它们为止，因为我们无法适应宗地，或使宗地支持一些开箱即用的东西。

Which one should you use? I would recommend Parcel for small projects, and webpack when you grow out of its capabilities and you want absolute control on everything your module bundler does.

您应该使用哪一个？ 我建议将Parcel用于小型项目，而当Webpack超出其功能并且希望对模块捆绑器所做的一切进行绝对控制时，建议使用webpack。

翻译自: https://flaviocopes.com/parcel/

包裹类型