更多内容欢迎来到博客：https://imjianjian.github.io

为什么学习parcel

17年12月6日，parcel发布了第一个正式版本，目前已经在GitHub上收获了17.7k+个start。
Parcel是一个Web应用程序打包器(bundler)，与以往使用过的前端构建工具对比，零配置似乎非常具有优势。
官方表示parcel的打包速度在有cache的情况下，打包速度几乎是webpack的数倍（官方10倍，应该是最佳情况0.0）

安装

npm i -g parcel-bundler

打包

entry

parcel可以用任何文件作为打包入口，一般推荐使用html或js文件。

资源

parcel对js，css，html等特定文件有特殊的支持，parcel会自动分析文件中的依赖关系，相同类型的资源被组合在一起成为相同的输出包。如果你在js文件中引入了其他类型的文件（例如css）,那么css依旧会被单独打包，而不是作为内联一并打包到js中。html中的通过链接引入的文件（例如图片，css，js文件）也会被提取并单独打包。

parcel支持使用CommonJS和ES6的模块语法来到如文件。css支持@import方式引入，

// 使用 CommonJS 语法导入模块
const a = require('./a');// 使用 ES6 import 语法导入模块
import a from './a';/* 导入另一个 CSS 文件 */
@import './a.css';

转换

现在前端项目中使用到的预处理语言及扩展语言越来越多，css预处理语言有less，sass，stylus等，javaScript的扩展语言有TypeScript，CoffeeScript等。还有pug，ejs，jsx，vue等模板，需要在打包时进行转换。

parcel中已经内置了很多常见的转换和编译器，也可以使用插件来扩展。

在parcel中使用Babel，PostCSS，PostHTML的方式与其单独使用或与其他打包器配合使用的方式相同。

先安装到项目中

npm i -D babel-preset-env
npm i -D postcss-modules autoprefixer
npm i -D posthtml-img-autosize

然后创建配置文件，例如.babelrc

{"presets": ["env"]
}

代码拆分

若果要将代码分割成多个单独的包以节省加载时间。parcel使用动态import()函数来实现引入和懒加载。用这种方式引入会被拆分成单独的包并且按需加载。

import()和require()的使用相似，但是import返回的是一个Promise，这意味着它是异步的。

这可以用在路由配置和页面渲染中：

//vue路由
{path: 'home',component: () =>import('../pages/home.vue')
}
//页面渲染
import('./pages/about').then(function (page) {// 渲染页面page.render();
});

既然是Promise，这意味着我们可以结合Generator函数（async函数）;

// 设置页面名称到动态引入的映射中。
// 在使用前，这些页面都不会被加载。
const pages = {about: import('./pages/about'),blog: import('./pages/blog')
};async function renderPage(page) {// 懒加载请求页面。const page = await pages[page];return page.render();
}

开发和生产环境

开发模式

开发过程中，使用以下命令，会开启代码监听并打开parcel的内置服务器，在浏览器中打开localhost://1234,就可以看到。也可以使用-p命令修改默认端口

parcel index.html

如果有自己的服务器，你可以在watch 模式下运行 Parcel 。当文件改变它仍然会自动重新构建并支持热替换，但是不会启动 web 服务。

parcel watch index.html

当你准备在生产模式下创建，build 模式会关闭监听并且只建立一次。

生产模式

当需要绑定应用程序的时候，你可以使用 Parcel 的生产模式。

parcel build index.html

这将关闭监听模式和热模块替换，所以它只会编译一次。它还会开启 minifier 来减少输出包文件的大小。Parcel 使用的 minifiers 有 JavaScript 的 uglify-es ，CSS 的 cssnano 还有 HTML 的 htmlnano。

启动生产模式还要设置环境变量 NODE_ENV=production 。像 React 这种只用开发调试功能的大型库，通过设置这个环境变量来禁用调试功能，从而构建得更小更快。

命令参数

-p, –port 设置服务器端口
–https 在https协议上运行
-o, –open 自动在默认浏览器打开
-d, –out-dir 设置输入路径默认为dist
–public-url 设置服务器运行的路劲. 默认与–out-dir option 设置的相同
–no-hmr 关闭热模块替换
–no-cache 关闭缓存
-V, –version 版本信息
-h, –help 帮助信息

插件

Parcel 采用与许多其它工具稍微不同的策略，许多常见的格式都被开箱即用地包含进来，而不需要安装或者配置额外的插件。然而，有些情况你可能会想在非标准的情况下扩展 Parcel 的能力，而那些时候，插件是被支持的。安装的插件会基于 package.json 的依赖会被自动检测并加载。parcel插件通常以”parcel-plugin-*”命名。

目前parcel的插件并不多，常用到的有：
- parcel-plugin-vue
- parcel-plugin-eslint
- parcel-plugin-inlinesvg
- parcel-plugin-pug
- parcel-plugin-typescript
- parcel-plugin-fable
- parcel-plugin-handlebars
- parcel-plugin-svelet
- parcel-plugin-elm
- parcel-plugin-markdown
- parcel-plugin-stylelint
- parcel-plugin-angular
- parcel-plugin-mustache

零配置打包vue

项目地址: https://github.com/w3c-king/parcel-vue

零配置构建工具：parcel 1相关推荐

零配置构建工具：parcel
更多内容欢迎来到博客:https://imjianjian.github.io 为什么学习parcel 17年12月6日,parcel发布了第一个正式版本,目前已经在GitHub上收获了17.7k+个 ...
【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具
前言一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
Parcel极速零配置Web应用打包工具
当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在webpack打包的配置,这个零配置着实让我好奇不已,迅速学习一波. Parcel(parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl])有以 ...
详解Parcel：快速，零配置web应用打包工具
Parcel有什么特别的,我为什么要关心它? 虽然webpack提供了非常多灵活的配置,但是与之带来的是复杂度的提升,而Parcel却非常的简洁.Parcel自己的口号也是非常直白:零配置. 为什么这 ...
前端工资涨不上去？可能是你没掌握构建工具：关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
每个前端都应该掌握构建工具大概从 2019 年到现在的这三年多的时间里,构建工具几乎已经成为前端发展最快的一个部分. 构建工具,属于前端工程化领域.而前端工程化,是每一个高级前端开发人员都必须要去深 ...
前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc
文章目录背景分类转译器打包器对比 gulp VS webpack Bundle vs Bundleless(代表就是webpack VS vite) 其他比较个人理解总结官网背景做前 ...
Vue-cli 3.X 构建工具零基础快速上手
文章目录一.环境准备 1. 安装node 2. 配置镜像二.安装Vue CLI 2.1. 查看当前vuecli版本 2.2. 安装最新版本 2.3. 安装指定版本三.创建web项目 3.1. 指 ...
从零实现Vue的组件库（零）- 基本结构以及构建工具
今年三月份入职以来,一直在做后台运营系统,其中重复性工作有很多,其中组件库就是一项.尽管现阶段有很多优秀的开源组件库,但是为了适应产品奇奇怪怪的需求,还是要手动实现一些组件.将其沉淀下来,积累一些自己 ...
【Groovy】Gradle 构建工具 ( 自动下载并配置构建环境 | 提供 API 扩展与开发工具集成 | 内置 Maven 和 Ivy 依赖管理 | 使用 Groovy 编写构建脚本 )
文章目录一.Gradle 自动下载并配置构建环境二.Gradle 提供 API 扩展与开发工具集成三.Gradle 内置 Maven 和 Ivy 依赖管理四.Gradle 使用 Groovy ...
sbt编程语言scala的构建工具配置及项目构建（附带网盘下载）
SBT简介 SBT 是 Scala 的构建工具,全称是 Simple Build Tool, 类似 Maven 或 Gradle. Java可以用Maven快速构建项目,scala用SBT快速构建一个 ...

零配置构建工具：parcel 1