前端進階（10） - webpack 以外的另外一種選擇：parcel

時間 2019-11-06

標籤前端進階 webpack 以外另外一種選擇 parcel 简体版

原文原文鏈接

webpack 以外的另外一種選擇：parcel

以前有寫過一篇 webpack 以外的另外一種選擇：rollup，此次算是姊妹篇，介紹另一個工具 parcel.css

如今前端打包基本上都會用 webpack，但常常使用 webpack 的開發者基本都有一個體會：配置比較複雜，尤爲是有不少項目的時候，更新須要處處改配置。html

parcel 便提供了一個額外的選擇，對於不喜歡配置的開發者尤爲友好，由於 parcel 沒有配置文件，僅有的少許配置項也是從命令行輸入。另外 parcel 會自動識別安裝在 package.json 中的 parcel 插件，而後導入，而無需手動配置。前端

1. parcel

1.1 安裝

# 全局
npm install -g parcel-bundler

# 本地
npm install --save-dev parcel-bundler

1.2 開發

parcel 可使用任何類型的文件做爲入口，但通常是以 HTML 或 JavaScript 文件做爲入口文件。webpack

當以一個 html 文件做爲入口進行開發時，在 html 文件中，你能夠聲明多個 js 入口文件，也能夠聲明多個 css 入口文件，也能夠加載其餘的靜態資源（如圖片）。git

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./index.css">   <!-- css 入口文件 -->
  <link rel="stylesheet" href="./index2.css">  <!-- css 入口文件 2 -->
</head>
<body>
<img src="./images/background.jpg">            <!-- 加載圖片 -->
<script src="./index.js"></script>             <!-- js 入口文件 -->
<script src="./index2.js"></script>            <!-- js 入口文件 2 -->
</body>
</html>

但通常都會只有一個 js 入口，css 使用 js 來加載。github

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./index.js"></script>             <!-- js 入口文件 -->
</body>
</html>

運行開發命令web