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愈來愈好用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。