在前端开发过程中，构建工具是必不可少的。其中，打包工具就是前端构建工具中的重要一员。@njakob/parcel 是一个轻量级的零配置的打包工具，相比于 webpack、rollup 等常用的打包工具，@njakob/parcel 更加简单易用，而且不需要配置文件。本文将介绍如何使用 @njakob/parcel 进行前端项目打包。
安装
@njakob/parcel 是一个 npm 包，可以通过 npm 安装：
npm install -g @njakob/parcel
使用
基础用法
在项目根目录中执行以下命令即可进行项目打包：
parcel build 入口文件
其中，入口文件可以是 HTML、JavaScript、CSS 文件。例如，需要打包一个 index.html 文件可以使用以下命令：
parcel build index.html
打包成功后，可以在项目根目录中看到 dist 目录，打包后的资源都在该目录中。
配置
在大多数情况下，使用默认配置即可完成项目打包。但是，在某些特殊情况下，可能需要对项目打包进行一些定制化配置。@njakob/parcel 支持自定义配置，配置文件为 .parcelrc 文件。
以下是一个 .parcelrc 文件的基本配置：
-- -------------------- ---- -------
-
---------- -------------------------
------------ -
-------- -
---- -------
-
--
--------------- - -
-其中，
- extends：指定继承默认配置；
- resolvers：配置别名；
- transformers：自定义转换器。
更多配置请参考官方文档：https://parceljs.org/configuration.html。
自定义插件
@njakob/parcel 支持插件扩展，可以通过插件实现更灵活的定制化。
以下是一个自定义插件示例：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -------- --------- -
-------------------------- --------------------------------------
--
----- --------------- -
----- ----------------- -
-- ------------ --- ------ -
----- ------ - ----- ---------------------------------------------------------
-------------- - -----------
-
------ ---------
-
-其中，
- addPackager：用于在打包器中注册一个新包装程序；
- PostCSSPackager：自定义包装器；
- package：用于在打包开始之前对包进行处理，此处实现对 css 文件进行 postcss 处理。
更多插件开发文档请参考官方文档：https://parceljs.org/plugin-system.html。
结语
通过本文的介绍和示例，相信大家已经了解了如何使用 @njakob/parcel 进行前端项目打包，并进一步掌握了如何配置自定义插件。@njakob/parcel 作为一个轻量又 zero config 的打包工具，虽然功能不及 webpack 等打包工具强大，但它也足以满足大多数项目的需求，对于初学者而言是入门前端打包的不二选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aec81e8991b448d8930