Parcel个人笔记

Posted mcgee0731

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Parcel个人笔记相关的知识,希望对你有一定的参考价值。

Parcel

零配置前端应用打包器,官方建议将html文件作为打包入口

安装:yarn add parcel-bundler --dev

打包:yarn parcel src/index.html 同时会自动开启内部服务器,监听改变

# index.html 入口文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parcel Tutorials</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
# main.js

import foo from \'./foo\';

foo.bar()
# foo.js

export default {
  bar:()=>{
    console.log("bar");
  }
}

HMR 热替换功能

当前模块,或者当前模块所依赖模块更新后,回调会自动执行

# main.js

...

if(module.hot){
  module.hot.accept(()=>{  // 接收一个参数热替换的回调函数
    console.log(\'hmr\');
  })
}

自动安装依赖

# main.js

import $ from \'jquery\' //直接引入,保存后自动安装

$(document.body).append(\'<h1>Hello Parcel</h1>\')

非js类型文件

添加一个style.css的样式文件,然后导入样式文件
添加一个.png图片,然后导入

# main.js

import \'./style.css\'
import logo from \'./mc.png\'

$(document.body).append(`<img src="${logo}" />`)

支持动态导入

# main.js

// import $ from \'jquery\'

import(\'jquery\').then($=>{  

  $(document.body).append(\'<h1>Hello Parcel</h1>\')
})

生产模式打包

yarn parcel build src/index.html

相同体量的打包,parcel会比webpack快很多,parcel内部是多进程同时工作,充分发挥了多核cpu性能,webpack可以使用happypack插件来实现这一点

Parcel发布于2017年,当时Webpack使用上过于繁琐,完全零配置,构建速度快

vs.Webpack

  • Webpack生态更好,扩展更丰富
  • Webpack越来越好用

以上是关于Parcel个人笔记的主要内容,如果未能解决你的问题,请参考以下文章

JS周刊#405 - 精通模块化 JS,Parcel 1.10.0 发布,Trix 1.0 富文本编辑器,创建虚拟鸟类的簇拥行为

Fragment 与 Parcel 一起崩溃:调用 onPause 方法时无法编组值错误

Binder学习笔记—— Parcel是怎么打包的?

探索 parcel(tree-shaking) 构建 vue 插件

探索 parcel(tree-shaking) 构建 vue 插件

json 个人的vscode的代码片段