A blazing fast web bundler with zero configuration

Webpack có lẽ là web bundler đang được sử dụng phổ biến nhất với cộng đồng cực lớn với đủ loại plugin/loader cho bạn dùng. Tuy nhiên, khi bạn cần làm một cái POC nho nhỏ hay một project cỡ nhỏ thì webpack thực sự quá cồng kềnh. Phải cài cả đống package, rồi lại còn config nữa. Vì vậy hôm nay chúng ta hãy cùng đến với Parcel, một bundler mới được ra đời cách đây không lâu. Điểm đặc biệt của bundler này là hoàn toàn không cần config gì hết.

Blazing fast

Tác giả quảng cáo là parcel siêu nhanh vì nó tận dụng được tối đa CPU đa nhân. Dưới đây là benchmark cho một project với 1726 modules, kích thước sau khi build lên đến 6.5MB.

Bundler Time
browserify 22.98s
webpack 20.71s
parcel 9.98s
parcel - with cache 2.64s

Tuy nhiên cũng không phải là lúc nào parcel cũng ngon hơn webpack. Như trong project này chẳng hạn

bundler version build time build time w/ cache bundle size config LOC
webpack webpack/webpack#next 340ms 184ms 5.72kb 15
parcel-bundler 1.2.1 1.78s 473ms 21.094kb 0

Zero configuration

Bạn không cần config một tí nào để chạy Parcel hết, chỉ cần cài các npm package và transformer như Babel, PostCSS .etc là xong. Parcel cũng có một vài advanced api để bạn có thể viết thêm plugin, script cho parcel. Dưới đây là một vài ví dụ với Parcel.

Hot Module Replacement

Không cần cài thêm gì cả, chỉ cần đơn giản chạy parcel là được rồi

Đầu tiên viết một file index.html đã

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
{
  "scripts": {
    "parcel-dev": "parcel index.html"
  }
}
yarn parcel-dev

Để build ở production mode thì chạy parcel build

{
  "scripts": {
    "parcel": "parcel build index.html"
  }
}
yarn parcel

Babel

Babel transform cực kì đơn giản, chỉ cần thêm file .babelrc là parcel sẽ đọc được

yarn add --dev babel-preset-env

.babelrc

{
  "presets": ["env"]
}
yarn parcel

PostCSS

PostCSS cũng chỉ cần thêm file .postcssrc thôi

.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

SCSS

SCSS cũng không cần config gì luôn.

Thêm package node-sass

yarn add --dev node-sass

Viết một file index.scss

#app {
    background-color: ghostwhite;
    color: violet;
}

Import nó vào index.js

import './index.scss'

Chạy parcel

yarn parcel

Done!

React

Cài mấy package của React

yarn add react react-dom babel-preset-env babel-preset-react

.babelrc

{
  "presets": ["env", "react"]
}

Viết một component trong file app.js

import React from "react";
import ReactDOM from "react-dom";

class Example extends React.Component {
  render() {
    return <div>React</div>;
  }
}

ReactDom.render(<Example/>, document.getElementById('app'))

Thêm file component vừa viết vào file HTML

<script src="app.js"></script>

Chạy parcel thôi

yarn parcel

Done!

Preact

Preact cũng tương tự

yarn add preact preact-compat babel-preset-env babel-preset-preact

.babelrc

{
  "presets": ["env", "preact"]
}

File component

import { h, render, Component } from 'preact';

class Example extends Component {
  render() {
    return <div>Preact</div>;
  }
}

render(<Example/>, document.getElementById('app'));

Thêm file component vừa viết vào file HTML

<script src="app.js"></script>
yarn parcel

Done!

TypeScript

TypeScript còn dễ hơn. Chỉ cần thêm package typescript là xong

yarn add --dev typescript

index.ts

document.write('TypeScript')

index.html

<script src="index.ts"></script>
yarn parcel

Done!