Parcel 是一个前端构建工具，Parcel 官网 将它定义为极速零配置的Web应用打包工具。没错，又是一个构建工具，你一定会想，为什么前端的构建工具层出不穷，搞那么多工具又要花时间去学习，真的有意义吗？在 webpack 已经成为前端构建工具主流的今天，一个新的工具能有什么优势来站稳脚跟呢？

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都做网站、上蔡网络推广、重庆小程序开发公司、上蔡网络营销、上蔡企业策划、上蔡品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供上蔡建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

前言

为什么要用 Parcel

一个好的打包工具在前端工程中占着比较重要的地位。然，何谓之好？或功能强大，或简单易用，或提高效率，或适合自己。在时代不断发展中，一个个好的工具正在被一个更好的工具所替代。随着对 webpack 复杂配置的吐槽声越来越多，Parcel 打着 “快速、零配置” 的旗子出来了。

Parcel 的特性

• 快速打包：启用多核编译，并具有文件系统缓存
• 打包所有资源：支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件
• 自动转换：使用 Babel，PostCSS 和 PostHTML 自动转换
• 零配置代码拆分：使用动态 import() 语法拆分您的输出包，只加载初始加载时所需的内容
• 模块热替换：不需要进行任何配置
• 友好的错误记录：以语法高亮的形式打印的代码帧，以帮助你查明问题

如何使用

快速使用

全局安装 npm i parcel-bundler -g 或 yarn add parcel-bundler global

Parcel 使用一个文件作为入口，***是 HTML 或 JavaScript 文件，我们在项目中新建 index.html 文件，直接运行命令 parcel index.html 即可启动本地服务器

在浏览器中访问 http://localhost:1234/ ，可以通过 parcel index.html -p 8888 重新设置端口号。

无需配置文件！

Parcel 支持 CommonJS 模块语法、ES6 模块语法、在 js 文件中导入 node 模块或 css、在 css 中使用 import 等，也都无需配置文件！

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
         
  
  
  
         
  
  
  
     
  
  
  
     
  
  
  
        
Hello Parcel
 
  
  
  
         
  
  
  
     
  
  
  
 
 
 
 

 
 
 

  
  
  
// src/js/index.js 
  
  
  
const main1 = require('./main1.js');    // 支持 CommonJS 模块语法 
  
  
  
import main2 from './main2.js';         // 支持 ES6 模块语法 
  
  
  
import '../css/index.css';              // 支持在 js 中导入 css 
  
  
  
main1(); 
  
  
  
main2(); 
 
 
 

上面只是简单的使用了 Parcel，但在实际项目中，我们会用到各种技术栈，下面我们来看看 Parcel 如何集成各种技术栈的。

注意：Parcel 里使用了 async await，因此需要 node 7.6 以上的版本才支持

集成技术栈

首先在项目下创建 package.json 、.babelrc、以及 index-react.html、index-vue.html、index-ts.html 三个作为各自技术栈 demo 的入口文件。

在 package.json 中添加以下命令

 
 
 

  
  
  
"scripts": { 
  
  
  
  "react": "parcel index-react.html", 
  
  
  
  "vue": "parcel index-vue.html", 
  
  
  
  "ts": "parcel index-ts.html" 
  
  
  
} 
 
 
 

React

安装 React 的相关依赖 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中添加

 
 
 

  
  
  
{ 
  
  
  
  "presets": ["env","react"] 
  
  
  
} 
 
 
 

这就是上面讲到的 Parcel 的特性：自动转换。该文件是让 Parcel 自动转换 ES6 和 React JSX。