A blazing fast web bundler with zero configuration
Bài đăng này đã không được cập nhật trong 6 năm
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!
All rights reserved
