入门Parcel,极速零配置Web应用打包工具

706 阅读2分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情

前言

当你的职业生涯迎来第四个 JavaScript 构建工具时,你就知道自己老了。

最早是 Grunt,然后是 Gulp,再后来我们挥手告别 Gulp 复杂配置的地狱,迎来了 Webpack。但是五年后,Webpack 同样是一团糟,变得缓慢、臃肿和混乱。现在,我们的项目又切换到了 Parcel、esbuild、vite,构建时间从1分钟变为1秒,太棒了,让我们希望这一次会成功。

Parcel 的优点

极速打包

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。

将你所有的资源打包

Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。

自动转换

如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

零配置代码分拆

使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码。

热模块替换

Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

友好的错误日志

当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。

使用 Parcel 构建 Web 应用

初始化项目

  1. 新建文件一个项目文件 parcel。
  2. 在项目目录下执行 yarn init -y, 生成一个一个 package.json 文件。
  3. 安装parcel yarn add --dev parcel
  4. 创建入口文件 index.html
<html>
  <body>
    <div id="root"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>
  1. 主要的 JavaScript 文件。
import React from "react";
import App from "./src/app";
import { createRoot } from "react-dom/client";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);
  1. 创建app的相关 JavaScript 文件 app.js app.less
import React from "react";
import "./app.less";

const App = () => {
  return <div className="app">hello world</div>;
};
export default App;
.app {
  display: flex;
}
  1. 最终项目结构

WX20220920-175614@2x.png

配置package.json来添加任务脚本

source 字段指明入口文件,你也可以这样 parcel index.html以达到同样效果。
dev 配置服务运行脚本命令,parcel内置热更新功能,随着你的代码更改而去更新模块。
build 配置打包命令,parcel内置打包优化功能,这包括tree-shaking和压缩 JavaScript、CSS 和 HTML、调整大小和优化图像、内容散列、自动代码拆分等等,让你放心使用。

  {
  "name": "parcel",
  "version": "1.0.0",
  "source": "index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "@parcel/transformer-less": "2.7.0",
    "less": "^4.1.3",
    "parcel": "^2.7.0",
    "process": "^0.11.10"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

扩展配置

Parcel 配置开始。但是随着应用程序的增长和构建要求变得更加复杂,可以通过 .parcelrc进行扩展。

.parcelrc

{
  "extends": ["@parcel/config-default"],
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  },
  "resolvers": ["@parcel/resolver-glob", "..."],
  "namers": ["@company/parcel-namer", "..."],
  "packagers": {
    "*.{jpg,png}": "parcel-packager-image-sprite"
  },
  "optimizers": {
    "*.js": ["parcel-optimizer-license-headers"]
  },
  "compressors": {
    "*.js": ["...", "@parcel/compressor-gzip"]
  },
  "reporters": ["...", "parcel-reporter-manifest"]
}

详情 parceljs

参考文献

parcel