关于parcel:打包工具Parcel

Parcel 是 Web 利用打包工具,利用多核解决提供了极快的速度,并且不须要任何配置。 Parcel 能够应用任何类型的文件作为入口,与 webpack 不同的是 Parcel 倡议应用 HTML 文件为入口文件。如果在 HTML 中应用相对路径引入次要的 JavaScript 文件,Parcel 也将会对它进行解决将其替换为绝对于输入文件的 URL 地址。 装置 yarn add parcel-bundler --dev以后模块,或者以后模块所依赖模块更新后,回调会主动执行 import foo from "./foo";foo.bar();if (module.hot) { module.hot.accept(() => { console.log("hmr"); });}Parcel 内置了一个当你扭转文件时可能主动从新构建利用的开发服务器,而且为了实现疾速开发,该开发服务器反对热模块替换。只须要在入口文件指出: yarn parcel src/index.html当初在浏览器中关上 http://localhost:1234/ 主动装置依赖import $ from "jquery";$(document.body).append("<h1>Hello Parcel</h1>");非 js 类型文件import $ from "jquery";import "./style.css";import logo from "./zce.png";$(document.body).append(`<img src="${logo}" />`);反对动静导入import("jquery").then(($) => { $(document.body).append("<h1>Hello Parcel</h1>"); $(document.body).append(`<img src="${logo}" />`);});生产模式打包这将敞开监听模式和热模块替换,所以它只会编译一次。它还会开启 minifier 来缩小输入包文件的大小。Parcel 应用的 minifiers 有 JavaScript 的 terser ,CSS 的 cssnano 还有 HTML 的 htmlnano。Parcel 还将会给大多数 bundles 文件名增加 hash,以获得最佳性能和效率 ...

December 2, 2021 · 1 min · jiezi