前言：
在继grunt、gulp实现自动化构建之后，webpack又引领前端打包潮流，众所周知的是，vue-cli的脚手架就是基于webpack进行项目打包的。而webpack还在上升的势头的时候，又一打包神器横空出世——parcel。
Parcel
快速，零配置的 Web 应用程特性
快速打包
Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。
打包所有资源
Parcel 支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件。
自动转换
在需要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。
零配置代码拆分
Parcel 使用动态 import() 语法拆分您的输出包，所以只加载初始加载时所需的内容。
模块热替换
当你在开发过程中进行更改时，Parcel 会自动更新浏览器中的模块，不需要进行任何配置。
友好的错误记录
遇到错误时，Parcel 会以语法高亮的形式打印的代码帧，以帮助你查明问题。
为啥用 parcel？
现在有很多Web应用程序打包工具，包括webpack 和 browserify。所以，我们为什么还需要一个呢？主要的原因是围绕开发者的经验。
很多打包工具都围绕配置和插件进行构建的，因此看到有500行以上配置的应用程序正常运行并不罕见。这种配置不仅繁琐和费时，而且也很难得到正确的配置，必须为每个应用程序复制。通常情况下，这可能导致次优化的应用程序发送到生产环境。parcel 被设计为零配置：只要将它指向你的应用程序的入口点，它就能做正确的事情。
现有的打包工具大多都执行得慢，具有很多文件和依赖的大型应用将花费数分钟去构建，随着时间的推移，这将会相当痛苦的事情。监听文件变更能帮助重新编译，当时初始构建的时候通常还是会很慢。parcel 利用现代的多核处理能力和工作线程去并行编译你的代码。这导致了初始构建的速度极大的提升。它还有一个文件系统缓存，可以保存每个文件的编译结果，以便更快的后续启动。
最后，现有的打包工具都是围绕字符串加载/转换进行构建的，其中转换需要一个字符串，解析它，然后进行一些转换，之后再次生成代码。通常这最终导致许多解析和代码生成在单个文件上运行，这是低效的。相反，parcel 的转换工作在 AST上，所以这样每个文件就有一个解析，多个转换和一个代码生成。
Parcel 是如何工作的？
Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源，还有附加在其上的其它格式的资源。例如，在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的，它能按你所期待的方式那样与任意类型的资源工作，且毋须配置。
构建资源树
Parcel 接受单个入口资源作为输入，可以是任意类型：JS、HTML、CSS、图片文件等等。在 Parcel 中定义了许多不同的资源类型，它知道如何去处理特定的文件类型。资源会被解析，资源的依赖会被提取，资源会被转换成最终编译好的形态。此过程创建了一个资源树。
构建文件束树
一旦资源树被构建好，资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束，然后动态的 import() 会被创建成子文件束 ，这引发了代码的拆分。当不同类型的文件资源被引入，兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件，那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。如果资源被多于一个文件束引用，它会被提升到文件束树中最近的公共祖先中，这样该资源就不会被多次打包。
打包
在文件束树被构建之后，每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来，生成到最终被浏览器加载的文件中。
[ps：基于官网https://parceljs.org/进行的总结]
入门Demo
一、初始化npm
npm init
二、添加babel 并安装 babel-preset-env依赖
1.新建.babelrc 文件
{
"presets": [
"env"
]
}
2.安装依赖
npm install babel-preset-env --save-dev
三、添加parcel
npm install parcel-bundler --save-dev
四、最后生成的package.json文件大概就这样：
{
"name": "parcel-demo",
"version": "1.0.0",
"description": "parcel",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"parcel index.html"
},
"keywords": [
"parcel"
],
"author": "aaron",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.2.0"
}
}
[ ps：给npm添加启动项：
"start":"parcel index.html"
]
五、最后根据官网新建index.html，index.js等文件，然后命令行打包，然后运行npm start 或 parcel index.html 启动，简单的demo就生成了。
index.html / index.js / main.js / main.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello Parcel</title>
</head>
<body>
<h1 class="main">parcel</h1>
<script src="./js/index.js"></script>
</body>
</html>
import main from './main'; main();
import classes from '../css/main.css'
export default ()=>{
console.log(classes);
}
.main{
background: url("../images/parcel.png");
color:red;
}
截图：
更多
如果报了上面那些错误。貌似node.js 7.6版本以下对await / async 不支持，所以在执行打包时需要升级node.js版本。
parcel中文官网：http://www.parceljs.io/
parcel GitHub：https://github.com/parcel-bundler/parcel
关于parcel的更多使用方法还需深入了解才行，每一个打包工具我都觉得都有它的独特魅力。
期待parcel的发展......
继webpack后又一打包神器Parcel的更多相关文章
-
Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
-
webpack模块化管理和打包工具
Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...
-
Webpack安装配置及打包详细过程
引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...
-
webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
-
webpack中的图片打包之路
最近在Github上弄项目,需要搭建一个webpack开发环境.Emmm,是的,从0开始搭建一个项目确实不容易,光Webpack的坑就够我踩一路的了.这不,刚搭建到“图片打包”这里,就遇到了麻烦.最后 ...
-
webpack项目如何正确打包引入的自定义字体？
一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字体呢? 其实实现起来并不复杂,可以借用CSS3 ...
-
webpack项目如何正确打包引入的自定义字体
webpack项目如何正确打包引入的自定义字体 一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字 ...
-
webpack + vuecli多页面打包基于（vue-template-admin）修改
转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...
-
Webpack - CommonJs &; AMD 模块打包器
Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...
随机推荐
-
codeforces575A Fibonotci
题目大意:f[k]=f[k-1]*s[(n-1)%n]+f[(k-2)]*s[(k-2)%n];会修改某一位置的s值,但循环不变,求f[k]; 矩阵快速幂裸题,由于有修改,所以需要线段树优化 #inc ...
-
WPF下递归生成树形数据绑定到TreeView上
最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="> <TreeView.ItemTe ...
-
xcode ___gxx_personality_v0"; 编译错误
xcode ___gxx_personality_v0" 编译错误 Undefined symbols for architecture i386: "___gxx_persona ...
-
as3+java+mysql(mybatis) 数据自动工具（六）
这篇来写一些常量定义的实例.我一般在配置常量的时候,都会让 bitOffset = 20,这样是一个比较好的分配,就是每个分组可以有 0xFFFFF(1048575) 个常量,0xFFF(4095) ...
-
Bootstrap_排版_代码
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代 一.单行内联代码 <code>:一般是针对于单个单词或单个句子 ...
-
Linux 中将用户添加到组的指令
在 Linux 操作系统下,如何添加一个新用户到一个特定的组中?如何同时将用户添加到多个组中?又如何将一个已存在的用户移动到某个组或者给他增加一个组?对于不常用 Linux 的人来讲,记忆 Linux ...
-
Jmeter之接口测试
最近才入职新公司,好几天没有写博客了,经过一个朋友提醒,刚刚好觉得用Jmeter来做接口测试真的是再好不过了.下面就详细讲解下这两天我利用Jmeter做的接口测试. [安装Jmeter] 详细见博文: ...
-
Centos7 编译测试工具 wrk bombardier iftop
1.wrk 安装及使用----------------------------------------------------------------------------------------- ...
-
单源最短路——Dijkstra模板
算法思想: 类似最小生成树的贪心算法,从起点 v0 每次新拓展一个距离最小的点,再以这个点为中间点,更新起点到其他点的距离. 算法实现: 需要定义两个一维数组:①vis[ i ] 表示是否从源点到顶点 ...
-
Python自学笔记-装饰器1（廖雪峰的网站）
由于函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数. >>> def now(): ... print('2015-3-25') ... >> ...