【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

前几天使用了一下号称开箱即用的前端打包工具,Parcel。用起来真的超级爽的,写篇水文介绍下这个新玩意儿~

通常新项目启动前,会对即将用到的工具包,或者是 API 进行试用。一般是在本地新建一个项目,小的玩意儿直接上 index.html ,大的项目则会 npm init 一下,写上臃肿的配置文件。(有些框架自带起手式,eg. vue-clicreate-react-app

webpack 是现阶段大家比较常用的模块化构建工具,然而从零开始配置起来真的很恶心。你需要指定 entry,output,plugins ,loaders,可能写配置的时间比我们写 Demo 的时间还要长。

刀耕火种的 html 引入方式又会导致你不能使用一些特性,以及开发体验问题。

这时候你可以试用下 Parcel,我们以 React 的 Hello World 来演示一下如何什么叫开箱即用!

Step 1 安装依赖

安装 parcel,react 依赖,没什么好说

1
yarn init -y && yarn add parcel-bundler react react-dom

Step 2 配置文件

在 package.json 文件同级目录下新增两个文件。

./index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

./index.js

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>
Hello Parcel
</h1>,
document.querySelector('#root')
)

Step 3 开始体验

最后一步,你只需要启动 Parcel

./package.json

1
2
3
4
5
{
"scripts": {
"start": "parcel ./index.html --open"
}
}

执行 npm start ,你就能看到 Hello Parcel,并且自动 watch 文件变更,自动刷新页面,真的简单到没什么好说的。

本篇完。

优点

  • 开发体验良好,对新手友好
  • 默认配置,节省写配置文件的时间
  • 速度快,从官网上看,缓存的情况下比 webpack 快太多
  • 不需要额外的 loader 包,比如使用 Sass 你只需要安装 node-sass 即可,Parcel 会在解析 .sass 文件时自动识别并启用

缺点

  • 深度封装带来灵活性不高的问题,webpack 的一些功能你都无法通过 Parcel 来实现。
  • 文档不全,尝试使用的过程中,发现有很多特性在文档里面并没有描述,只能去 issues 里面寻找答案。
  • Parcel 可能不是你要的构建工具,比如使用过程中发现,改了文件内容,文件 hash 并没有更新,看了 issue ,作者认为不是 Parcel 要做的事,要做你自己做。。。

综上,Parcel 适合用来做一些演示 Demo 和包开发,离一款可使用于生产环境的 web 模块打包工具比较远。。。

以上。

如需转载,请注明出处: http://w3ctrain.com / 2018/03/03/using-parcel/