Skip to content

Latest commit

 

History

History
83 lines (59 loc) · 2.77 KB

19.md

File metadata and controls

83 lines (59 loc) · 2.77 KB

webpack 之外的另一种选择:parcel

之前有写过一篇 webpack 之外的另一种选择:rollup,这次算是姊妹篇,介绍另外一个工具 parcel.

现在前端打包基本上都会用 webpack,但经常使用 webpack 的开发者基本都有一个体会:配置比较复杂,尤其是有很多项目的时候,更新需要到处改配置。

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 文件作为入口文件。

当以一个 html 文件作为入口进行开发时,在 html 文件中,你可以声明多个 js 入口文件,也可以声明多个 css 入口文件,也可以加载其他的静态资源(如图片)。

<!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 来加载。

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

运行开发命令

parcel path/to/target.html

打包

parcel build path/to/target.html

以一个 js 文件作为入口进行开发也是类似的,可以参考官方文档 https://parceljs.org/

2. parcel vs webpack

webpack 相比,零配置是 parcel 最大的特点与优势,但 parcel 没有 webpack 功能强大,也缺少了些灵活性。

3. 后续

更多博客,查看 https://github.com/deepraining/blogs

作者:深雨 (@deepraining)

版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证