Parcel我的笔记

时间 2021-06-05

标签 css html 前端 jquery webpack web 服务器 app 函数性能栏目 CSS 繁體版

原文原文链接

Parcel

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

安装：yarn add parcel-bundler --devhtml

打包：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 热替换功能

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

# 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图片，而后导入webpack

# 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.htmlweb

相同体量的打包，parcel会比webpack快不少，parcel内部是多进程同时工做，充分发挥了多核cpu性能，webpack能够使用happypack插件来实现这一点服务器

Parcel发布于2017年，当时Webpack使用上过于繁琐，彻底零配置，构建速度快app

vs.Webpack函数

Webpack生态更好，扩展更丰富
Webpack愈来愈好用