前端进阶（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

parcel path/to/target.html

打包npm

parcel build path/to/target.html

以一个 js 文件做为入口进行开发也是相似的，能够参考官方文档 https://parceljs.org/。json

2. parcel vs webpack

与 webpack 相比，零配置是 parcel 最大的特色与优点，但 parcel 没有 webpack 功能强大，也缺乏了些灵活性。工具

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)