Below you will find pages that utilize the taxonomy term “Parcel”
Posts
Parcel - TypeScript transform
Parcel 支援 TypeScript 的轉換。
像是下面這邊筆者創建了個簡單的範例，建立了個 index.html，裡面引用了 index.ts。
<html> <body> <script src="./index.ts"></script> </body> </html> index.ts 內引用 message.ts，並將 message.ts 傳回的訊息輸出到主控台。
import message from "./message"; console.log(message); message.ts 則是將要顯示的訊息輸出。
export default "Hello, world"; 範例準備好後調用 Parcel 命令建置並啟用服務，Parcel 會自行下載 TypeScript 套件編譯 TypeScript。
Parcel 解析網站後會將需要的檔案處理後移至輸出目錄。
連至啟動的服務網址，可看到網站正確的被運行。
Link 🐠 轉換(Transforms)
read morePosts
Parcel - CSS asset
Parcel 支援 CSS 文件的處理，可在 CSS 中透過 @import 載入另一個 CSS。
... @import './background.css'; ... 也可以透過 url 函式引用圖片、字型。
... background-image: url('../images/Profile.jpg'); ... 像是下面這邊筆者創建了個簡單的範例，建立了個 index.html，裡面引用了 index.css。
<html> <head> <link rel="stylesheet" href="./style/index.css"> </head> <body> </body> </html> index.css 內透過 @import 引用了 background.css 檔，用 url 方法使用指定圖片設定背景圖片。
@import './background.css'; body { background-image: url('../images/Profile.jpg'); background-repeat:no-repeat; background-position: center; } background.css 設定背景為指定顏色。
body {background-color: coral;} 範例準備好後調用 Parcel 命令建置並啟用服務。
Parcel 解析網站後會將需要的檔案處理後移至輸出目錄。
連至啟動的服務網址，可看到網站正確的被運行。
Link 📦 資源(Assets)
read morePosts
Parcel - HTML asset
除了 JavaScript 文件外，Parcel 也支援 HTML 文件的處理。
像是下面這邊筆者創建了個簡單的範例，建立了個 index.html，裡面載入了 profile.jpg 且連結了 hello.html 頁面。
<html> <body> <img src="./images/profile.jpg"> <a href="./hello.html">Say Hello</a> </body> </html> profile.jpg 是很單純的大頭照。
hello.html 內引用了 hello.js 並輸出 Hello World 字樣。
<html> <body> <script src="./scripts/hello.js"></script> Hello World </body> </html> hello.js 內則是很簡單的利用 Console 輸出 hello world 字樣。
console.log("hello world"); 調用 Parcel 命令建置並啟用服務。
Parcel 解析網站後會將需要的檔案處理後移至輸出目錄。
連至啟動的服務網址，可看到網站正確的被運行。
Link 📦 資源(Assets)
read morePosts
Parcel - JavaScript asset
要使用 Parcel 在 JavaScript 中載入 JavaScript 模塊可用 CommonJS 的寫法。
const module = require(modulePath); 或是 ES6 的寫法。
import module from modulePath; 除了 JavaScript 的模塊外，也能引用 CSS 文件。
import cssPath; 以及引用圖片。
import imageUrl from imagePath; 像是下面這邊筆者創建了個簡單的範例，建立了個 index.html，裡面引用了 index.js。
<html> <body> <script src="./scripts/index.js"></script> </body> </html> index.js 內引用了不同類型的檔案。
//const hello = require('./hello'); import hello from './hello'; import '../style/index.css'; import profileImageUrl from '../images/profile.jpg'; console.log(profileImageUrl); 像是 js 檔(hello.js)。
console.log("hello world"); CSS 檔(index.css)。
body {background-color: coral;} 以及圖檔。
範例準備好後調用 Parcel 命令建置並啟用服務。
read morePosts
'Parcel - SyntaxError: Unexpected token function'
使用 Parcel 時若發生 SyntaxError: Unexpected token function 錯誤。
這是因為 Parcel 用到了 Node.js 8.x 的語法，確認 Node.js 是否已更新到指定版本，更新完後即可正常運行。
Link 🐛 about SyntaxError: Unexpected token function · Issue #244 · parcel-bundler/parcel · GitHub parcel 錯誤：SyntaxError: Unexpected token function - JJC 前端進階- SegmentFault
read morePosts
Parcel - Getting started
Parcel 使用前需先安裝套件。
可以透過 yarn。
yarn global add parcel-bundler 或是透過 npm 安裝。
npm install -g parcel-bundler 安裝完準備要進行打包的程式。
Index.html 檔案內容為：
<html> <body> <script src="./index.js"></script> </body> </html> Index.js 檔案內容為：
console.log("hello world"); 調用 Parcel 命令進行編譯並運行網站服務。
parcel [WebFile] 編譯後的檔案會產生在 dist 目錄下。
連至網站可看到打包後運行起來的樣子。
要退出網站服務的話，按下熱鍵 Ctrl + C，鍵入 Y 後 Enter 即可。
read morePosts
Parcel - Blazing fast, zero configuration web application bundler
Parcel 是一極速零配置的 Web 應用打包工具，不需額外的配置設定就能快速的將 Web 應用程式進行打包。
該工具具有以下幾個特點：
Blazing fast bundle times Bundle all your assets Automatic transforms Zero config code splitting Hot module replacement Friendly error logging 也就是說 Parcel 的打包速度極快、支援 JS/CSS/HTML 文件、可以自動轉換程式、不用額外的配置、可以動態更新、錯誤訊息比較好看。
其中速度極快是因為 Parcel 使用多核進行編譯，且會將編譯過的文件進行快取，所以編譯速度極快。
Parcel 的作者有在 4 CPU 的 2016 MacBook Pro 上將 1726 的模塊，6.5 M 大小的 Web 應用程式進行壓縮，可以看到 Parcel 在打包上的確花了較少的時間。
Tool Time browserify 22.98s webpack 20.71s parcel 9.98s parcel - with cache 2.64s Link 📦 Parcel
read more