开箱即用的Web应用打包工具-Parcel
您好，我是沧沧凉凉，是一名前端开发者，目前在掘金、知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识，欢迎关注。
在10年前，那时前端和后端还没有分离，前端写完了界面后统统都要将页面文件交给后端，然后由后端部署在Tomcat这一类的服务上，那个时代的前端受到了很大程度的轻视，甚至被戏称为-切图仔。
但后来发生了一件大事，那就是Chrome浏览器出现后，Google团队开源了V8引擎，Ryan Dahl这位大佬基于V8引擎开发了一款动荡整个前端行业的JavaScript运行环境-Node.js。由于它的出现，前端项目走向了工程化、前后端分离的大趋势，同时由于Node.js的原因，现在使用JavaScript不仅仅可以开发Web端，还可以开发手机端、桌面端、服务器端等等。
目前JavaScript有3款比较有名的打包框架，分别是大名鼎鼎的Webpack、高级前端常用的Rollup、以及号称0配置的Parcel。
它们各有各的优势，不过探究它们的区别并不是本篇文章的重点，经过我查阅了很多资料，这些资料一致认为，Webpack比较适合打包工程化项目，Rollup比较适合打包库，而Parcel的优势在于它的0配置打包。
例如之前我有一篇文件讲到：强大的油猴Tampermonkey脚本开发环境搭建，那个时候我还没有接触到Parcel，其实使用Webpack打包脚本不是不可以，只是Webpack需要经过一系列比较麻烦的配置，而像这一类脚本项目，使用开箱即用的Parcel打包就会更加的方便与快捷。
1. 使用Parcel
学习过Webpack的同学应该都清楚，Webpack有一个配置文件，如果在不进行任何配置的情况下，它默认只能打包.js和.json类型的文件，其它文件都无法直接进行打包，需要手动配置一个一个的loader。
而Parcel就不同，它几乎默认支持打包所有前端会用到的文件格式，什么css、sass、less、TypeScript、img等等，完全不需要你手动去写配置文件，几乎开发中所有需要用到的loader官方都已经在配置文件中帮你写好了，你要做的仅仅是需要下载一下编译环境，比如sass你就需要使用npm install -D sass下载sass编译环境，而less甚至都不需要安装，当Parcel检测到less文件时会自动进行安装编译环境！就是这么神奇！
1.1 简单打包
如果我们仅仅是为了简单打包一个js脚本文件，那么全局安装parcel-bundler就可以了。
npm install -g parcel-bundler
# 或者yarn
yarn global add parcel-bundler然后在正在搭建的项目中生一个package.json文件（如果不需要使用npm包，不生成也可以进行打包）。
npm init -y1.1.1 单入口打包
一般来讲，现代web框架生成的都是单页面应用，所以我们只需要一个index.html文件当做入口文件，然后在里面引入一个index.js文件。
例如：
index.html：
<html>
<body>
<script src="./index.js"></script>
</body>
</html>index.js：
console.log('hello world')Parcel内置了一个当你改动文件时能够自动重新构建应用的开发服务器，在控制台输入下面的命令就可以打开服务器：
parcel index.html该服务默认启动在1234端口上面，所以你访问http://localhost:1234/就可以访问到你的web应用，同时你也可以使用-p 8080来手动指定你想要运行的端口号。
parcel index.html -p 8080在某些情况下你想要打包一个js脚本，比如开发油猴脚本，那么你根本不需要启动一个服务器，只需要监听js文件的改变，那么在参数中加上watch，当文件改动时它仍然会自动重新构建并支持热替换，但是不会启动web服务。
parcel watch index.html上面这些命令运行后都会生成一个dist文件夹，这里就是放置开发环境下打包后的文件。
1.1.2 多入口打包
假设你有多个入口文件，比如是index.html和about.html，那么你有两种方式来打包：
指定当前文件的名字：
parcel index.html about.html使用tokens并创建一个glob：
parcel ./*.html通过这种方式打包后，如果要访问index.html则必须通过http://localhost:1234/index.html这种形式进行访问，直接访问http://localhost:1234是不行的。
1.1.3 生产环境
生产环境下不会持续监听所需要构建的文件的变化，也就是说只会构建一次，命令也很简单，直接使用：
parcel build index.html该模式下，所有的代码都是经过压缩处理的。
当然，你也可以指定输出目录：
parcel build entry.js --out-dir build/output
# 或者
parcel build entry.js -d build/output2. React
通过Parcel打包React项目是非常简单的一件事情：
npm install --save react react-dom
npm install --save-dev parcel-bundler
# 或者使用yarn
yarn add react react-dom
yarn add --dev parcel-bundler在项目中安装上面的依赖后，就可以使用React来进行搭建项目了，是不是非常简单，好！收工~
什么？你说你不知道怎么开始编写React应用程序？别急，让我一步一步的告诉你：
还是一样的步骤：需要一个index.html文件当做入口文件，然后在里面引入一个index.js文件，而index.js文件中再引入一个App.jsx文件。
index.html：
<body>
<!-- 这里的id为什么都行，React官方设置的root -->
<div id="root"></div>
<script src="./index.js"></script>
</body>index.js：
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App/>, document.getElementById("root"));App.jsx：
import React from "react";
const App = () => {
return (<div>Hello React!</div>);
};
export default App;这个时候再通过Parcel启动服务：
parcel index.html访问http://localhost:1234就可以看见Hello React!了，接下来就跟正常的React项目的编写一样。
3. Vue
Vue就更简单了，只需要安装一个vue包，如下：
npm install --save vue
npm install --save-dev parcel-bundler
# 或者使用yarn
yarn add vue
yarn add --dev parcel-bundler至于怎么开始编写Vue项目，方式和上面的React差不多，不过区别在于index.js的编写：
import Vue from 'vue';
import App from './App';
new Vue({
render: (h) => h(App)
}).$mount("#root")接下来就可以在App.vue文件中编写Vue项目了！
4. Typescript
一样，需要引入下面的包：
npm install --save-dev typescript
npm install --save-dev parcel-bundler
# 或者使用yarn
yarn add --dev typescript
yarn add --dev parcel-bundler收工！可以在项目中使用TypeScript语法了，当然，Parcel作为0配置打包框架，也可以直接编译TypeScript。
parcel myTypescriptFile.ts是不是非常简单！
经过我的实验发现，只要Parcel检测到相关的文件，会自动帮你安装相关的依赖，比如.jsx、.vue文件，所以你甚至可以连依赖都不用安装，直接用它打包就好了。
也就是说npm install --save react react-dom、npm install --save vue这种命令你都不用敲了，Parcel会自动帮你敲。
注：当然，上面的Vue和React项目的搭建仅仅是推荐编写一些脚本文件或者小型项目，中大型项目还是强烈推荐React和Vue官方的脚手架工具，因为官方针对项目的脚手架做了很多配置和优化，所以不推荐从0搭建。
5. 最后
Parcel需要讲的东西不多，因为它宣传的就是0配置，所以不需要过多的去查看它的官方文档，只需要用到的时候再进行查阅就行，这跟Webpack和Rollup这一类打包工具不一样，使用它们之前必须得进行配置，就因为简单易用这一点，在Webpack表现的如此强势的当下，Parcel还能占有一席之地。
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！