热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于parcel:打包工具Parcel

Parcel能够应用任何类型的文件作为入口,与webpack不同的是Parcel倡议应用HTML文件为入口文件。如果在HTML中应用相对路径引入次要的JavaScript文件,Parcel也将会对它进行解决将其替换为绝对于输入文件的URL地址。

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("

Hello Parcel

");

非 js 类型文件

import $ from "jquery";
import "./style.css";
import logo from "./zce.png";

$(document.body).append(``);

反对动静导入

import("jquery").then(($) => {
  $(document.body).append("

Hello Parcel

"); $(document.body).append(``); });

生产模式打包

这将敞开监听模式和热模块替换,所以它只会编译一次。它还会开启 minifier 来缩小输入包文件的大小。Parcel 应用的 minifiers 有 Javascript 的 terser ,CSS 的 cssnano 还有 HTML 的 htmlnano。Parcel 还将会给大多数 bundles 文件名增加 hash,以获得最佳性能和效率

yarn parcel build src/index.html

推荐阅读
author-avatar
小可爱小潴
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有