最近大家都在關注一個很流行的類似 webpack 的前端構建工具 Parcel。這個庫剛出來沒多久(好像截至目前十幾天),但是很受歡迎,看下圖就知道。
所以值得一探!
官方地址:https://parceljs.org/
github 地址:https://github.com/parcel-bundler/parcel
介紹這個庫之前,我們來說一下我個人覺得 webpack 的一些不好的地方(相對於 Parcel)。
-
需要寫配置檔案(webpack.config.js),可能每使用一個功能,比如載入圖片或 css,都要新增配置,要維護配置檔案,而 Parcel 不需要。
-
感覺編譯或載入速度有些慢,特別是庫多或專案複雜的時候,雖然有一些辦法程式碼拆分的方法可以解決,比如 CommonsChunkPlugin 或 DLLPlugin 之類的,但這些方法有些複雜。
- 需要一定的時間去學習如何使用 webpack。
而 Parcel 有很多優點,可以不使用配置檔案,也就是說你只管寫程式碼,它會自動執行,很智慧化,打個比方吧,比如在 webpack 中如果要處理 css,那得要安裝和載入一個 css 的 loader,然後配置檔案寫上幾行,可是 Parcel 不需要,直接用就行。Parcel 學習起來比較簡單,基本上可以說 "不用學習",只是使用就可以了。
除此之外,模組熱替換和程式碼拆分的功能,Parcel 也有,還有,如果要你用 Parcel 寫一個 react 的執行環境,可能不需要配置任何內容,只要安裝幾個 react 的包就可以用起來了。
說了這麼多,我還是要把官方對它的特性進行概括的圖片放出來:
下面我們要開始來體驗 parcel 的神奇之處,請跟緊。(原始碼我放到 https://github.com/hfpp2012/hello-parcel)
1. 安裝
$ npm install -g parcel-bundler
複製程式碼
然後初始化一個專案。
$ mkdir parcelapp
$ npm init
複製程式碼
2. 初體驗
新建 html 檔案。(這個將會是 parcel 的入口檔案)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Joke Generator</title>
</head>
<body>
<div id="wrap">
<h1>Joke</h1>
<h3 id="joke"></h3>
</div>
<p id="copy"></p>
<script src="./index.js"></script>
</body>
</html>
複製程式碼
index.js
console.log('Hello');
複製程式碼
執行編譯命令。
$ parcel index.html
複製程式碼
注意:上面的 parcel 命令接的是 html 檔案,它會讀 html 檔案的內容,找到 javascript 檔案,進行自運處理,不用像 webpack 那樣,還要指定 javascript 的入口檔案啥的。
生成了 dist
目錄。
dist
├── index.html
└── parcelapp.js
複製程式碼
監聽在 1234 埠,瀏覽器效果如下:
3. CommonJS 模組語法
新建 jokes.js 檔案。
jokes.js
module.exports = {
getOne: function () {
return new Promise((resolve, reject) => {
// 這個 api 是公開的。
fetch('http://api.icndb.com/jokes/random')
.then(res => res.json())
.then(data => {
resolve(data.value.joke);
})
})
}
}
複製程式碼
index.js
const jokes = require('./jokes');
jokes.getOne()
.then(joke => {
document.getElementById('joke').innerHTML = joke;
});
複製程式碼
效果如下:
4. ES6 模組語法
require
改成 import
,如下所示:
index.js
// const jokes = require('./jokes');
import { jokes } from './jokes';
jokes.getOne()
.then(joke => {
document.getElementById('joke').innerHTML = joke;
});
複製程式碼
jokes.js
export const jokes = {
getOne: function () {
return new Promise((resolve, reject) => {
fetch('http://api.icndb.com/jokes/random')
.then(res => res.json())
.then(data => {
resolve(data.value.joke);
})
})
}
}
複製程式碼
5. 使用 axios 代替 fetch
這只是為了演示使用一些庫。
首先安裝 axios。
$ npm install axios
複製程式碼
注意,這裡每安裝一個庫,都要重新執行 parcel index.html
jokes.js
import axios from 'axios';
export const jokes = {
getOne: function() {
return new Promise((resolve, reject) => {
axios.get('http://api.icndb.com/jokes/random')
.then(res => {
resolve(res.data.value.joke);
})
})
}
}
複製程式碼
6. 使用 jquery 代替 getElementById
$ npm install jquery
複製程式碼
index.js
import { jokes } from './jokes';
import $ from 'jquery';
jokes.getOne()
.then(joke => {
// document.getElementById('joke').innerHTML = joke;
$('#joke').text(joke);
});
複製程式碼
7. 匯入 非 JavaScript 資源
copyright.txt
Copyright 2018
複製程式碼
index.js
import fs from 'fs';
...
const copy = fs.readFileSync(__dirname + '/copyright.txt', 'utf8');
$('#copy').text(copy);
複製程式碼
8. 簡單處理 css
style.css
h1 {
color: red;
padding-right: 1rem;
}
#wrap {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
padding: 5px;
border: 1px solid #333;
border-radius: 4px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.12);
}
複製程式碼
index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="style.css" />
<title>Joke Generator</title>
</head>
<body>
...
</body>
</html>
複製程式碼
9. 在 css 中使用 import
backgrounds.css
body {
background: #f4f4f4;
}
複製程式碼
style.css
@import './backgrounds.css';
...
複製程式碼
10. 使用 sass
首先,安裝 node-sass。
$ npm install node-sass
複製程式碼
這裡要花費一定時間,請耐心等待
backgrounds.scss
注意:這裡由 backgrounds.css 改名為 backgrounds.scss
@import './variables.scss';
body {
background: $light-grey;
}
複製程式碼
variables.scss
$light-grey: #f4f4f4;
複製程式碼
style.css
/* 改名為 scss */
@import './backgrounds.scss';
...
複製程式碼
Parcel 還有很多好玩的,我們以後再說。