Parcel极速零配置Web应用打包工具
当听到极速零配置打包，我不经兴奋起来，零配置！！！想起在webpack打包的配置，这个零配置着实让我好奇不已，迅速学习一波。
Parcel（parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl]）有以下几大特点：
- 极速打包。Parcel使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。
- 将你所有的资源打包。Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。
- 自动转换。如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码。
- 零配置代码拆分。使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆
- 自动热更新。在你更新代码保存之后，在浏览可以立即得到更新。
- 友好的错误日志体验。当遇到错误时，会语法高亮代码片段
了解了Parcel的这些特性之后，接下来开始搞起吧。
首先通过yarn或者npm安装Parcel：
Yarn：
yarn global add parcel-bundler
npm：
npm install -g parcel-bundler
然后在自己创建的项目目录下创建一个package.json文件：
npm init
Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。
接下来，创建一个index.html 和 index.js 和 main.css文件。
//index.html
<!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>Parcel</title>
</head>
<body>
<div class="main">
<div class="box"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
//index.js
//index.css
.main{
width: 400px;
height: 400px;
background-color: red;
}
Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器，而且为了实现快速开发，该开发服务器支持热模块替换。只需要在入口文件指出：
parcel index.html
现在在浏览器中打开 http://localhost:1234/，就可以看到效果。并且在目录中会看到打包的文件都在dist/目录下：
如果你想使用自己的端口去覆盖默认端口，也可以使用 -p <port>选项覆盖默认的端口，比如：
parcel index.html -p 3000
控制台就会出现如下：
当需要绑定应用程序的时候，你可以使用 Parcel 的生产模式。
parcel build index.html
这将关闭监听模式和热模块替换，所以它只会编译一次。它还会开启 minifier 来减少输出包文件的大小。Parcel 使用的 minifiers 有 JavaScript 的 terser ，CSS 的 cssnano 还有 HTML 的 htmlnano。
JavaScript 文件或 HTML 文件都能导入 CSS 资源，并且能通过 @import语法引用依赖，还能通过 url() 函数引入图片，字体等。其他通过 @import 导入的 CSS 文件被内联到同一个CSS包里，并将 url()引用重写为其输出文件名。所有文件名都应该与当前 CSS 文件相关联。
创建other.css
.box{
width: 200px;
height: 200px;
background-color: green;
}
之后在main.css中引入
@import './other.css';
.main{
width: 400px;
height: 400px;
background-color: red;
}
除了普通的 CSS，其他的 LESS，SASS，以及 Stylus 等CSS预处理器语言也是支持的，并且执行方法是与之相同的。下面以scss为例。编译scss需要 node-sass模块. 通过 npm 安装它：
npm install --save-dev node-sass
一旦安装了 node-sass，你就可以在 JavaScript 文件中引入 SCSS 文件。
import './hello.scss'
SCSS 文件中的依赖可以使用 @import 语句。
许多打包工具需要你安装和配置插件来转换资源，Parcel 支持许多开箱即用的转换器和内置的编译器。您可以使用 Babel 转换 JavaScript ，使用 PostCSS 转换 CSS ，使用 PostHTML 转换 HTML。Parcel 在模块中找到配置文件 (例如 .babelrc ，.postcssrc) 时会自动运行并进行转换。
Babel 是一个流行的 JavaScript 转换器，拥有大型的插件生态系统。Babel 与 Parcel 一起使用的方式与单独使用或与其他打包工具一起使用的方式相同。先在应用程序中安装presets 和 plugins:
npm install --save-dev babel-preset-env
然后，创建一个 文件 .babelrc：
{
"presets": ["env"]
}
PostCSS 是一个使用插件转换 CSS 的工具，例如 autoprefixer，cssnext 以及 CSS Modules 。你可以使用这些名称之一创建配置，从而达到使用 Parcel 配置 PostCSS 的目的：.postcssrc(JSON)，.postcss.js，或 postcss.config.js。
先安装plugins:
npm install --save-dev postcss-modules autoprefixer
然后，创建一个文件 .postcssrc：
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}
Plugins 在 plugins 对象中被指定为 key，并使用对象的值定义选项。如果插件没有选项，只需将其设置为 true即可。
Parcel 在生产环境构建时，会使用 cssnano 来压缩 css 文件。可以创建一个 cssnano.config.js文件来进行详细的压缩配置：
module.exports = {
calc: false,
discardComments: {
removeAll: true,
}
};
在我们熟悉了使用npm run dev来开启一个服务之后，难免也想用这个方法。首先我们安装依赖：
npm install --save-dev parcel-bundler
然后向package.json 的 scripts 中添加 start 脚本。
// package.json
"scripts": {
"start": "parcel index.html"
}
之后使用npm run start就可以开启服务了。
附上git地址：https://github.com/parcel-bundler/parcel
中文网： https://zh.parceljs.org/
Parcel极速零配置Web应用打包工具的更多相关文章
- 详解Parcel：快速，零配置web应用打包工具。
译者按: 新一代Web应用打包工具Parcel横空出世,快速.零配置的特点让人眼前一亮. 原文: Everything You Need To Know About Parcel: The Blazi ...
- Parcel.js + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- Parcel + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- SpringMVC4零配置--web.xml
servlet3.0+规范后,允许servlet,filter,listener不必声明在web.xml中,而是以硬编码的方式存在,实现容器的零配置. ServletContainerInitiali ...
- SpringMVC4零配置--Web上下文配置【MvcConfig】
与SpringSecurity的配置类似,spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明. ...
- Parcel上手——又一个打包工具
Parcel是什么? 极速零配置Web应用打包工具 说到打包工具,大多人应该都用过Webpack,Parcel也是这一类工具. Parcel相比Webpack有什么优势? 配置简单 打包速度快 以下是 ...
- 原创全新打包工具Parcel零配置VueJS开发脚手架
parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/p... 初 ...
- 【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具
前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
- 使用parcel打造一个零配置的react工作流
parcel是一个前端打包工具.因其推崇的零配置理念,和webpack形成了鲜明对比.对于我这样一个被后端IDE智能提示宠坏的猿,自然是对webpack提不起爱.平时也都是使用CLI默认配置好webp ...
随机推荐
- PostgreSQL（一）教程 -----SQL语言
一.概念 PostgreSQL是一种关系型数据库管理系统 (RDBMS).这意味着它是一种用于管理存储在关系中的数据的系统.关系实际上是表的数学术语. 今天,把数据存储在表里的概念已经快成了固有的常识 ...
- 《剑指offer》— JavaScript（29）最小的K个数
最小的K个数 题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4. 思路一 使用JavaScript的Array对象的so ...
- SQL优化：索引的重要性
开篇小测验 下面这样一个小SQL 你该怎么样添加最优索引 两个表上现在只有聚集索引 bigproduct 表上已经有聚集索引 ProductID bigtransactionhistory 表上已经有 ...
- Excel：一维表和二维表 互转
一.一维表转二维表 数据源: 一份流水账式的值班表,为了便于打印张贴,现在需要使其变成这样的样式: 也就是从一维表变成传说中的二维表. 1.新建查询 依次单击[数据]→[新建查询] →[从文件]→[从 ...
- KVM安装、镜像创建（一）
环境准备 VMware Workstation Pro启动虚拟化 查看启动的系统是否支持vmx或svm grep -E '(vmx|svm)' /proc/cpuinfo 备注:操作系统centos ...
- Java基础-SSM之Spring和Mybatis整合案例
Java基础-SSM之Spring和Mybatis整合案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在之前我分享过mybatis和Spring的配置案例,想必大家对它们的 ...
- spring中bean配置和注入场景分析
bean与spring容器的关系 Bean配置信息定义了Bean的实现及依赖关系,Spring容器根据各种形式的Bean配置信息在容器内部建立Bean定义注册表,然后根据注册表加载.实例化Bean,并 ...
- gdb初步窥探
本文是通过学习左耳朵皓帝的文章,详见:http://blog.csdn.net/haoel 1.使用gdb gdb主要是用来调试c和c++程序,首先在编译前我们先把调试信息加到可执行程序当中,使用参数 ...
- bug处理
当提示405 method not allowed 时候,路由可能有问题,看看路由是get/post 是否合格
- Python 入门基础2 --基本数据类型、运算符
本节目录 一.IDE(集成环境的安装) 二.基本数据类型 三.输入输出 四.运算符 五.后期补充内容 一.IDE(集成环境的安装) 安装pycharm 注:快捷键: 1.ctrl + ? :注释此行, ...