当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在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
import './main.css'
console.log("hello world");
 
//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 的工具,例如 autoprefixercssnext 以及 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应用打包工具的更多相关文章

  1. 详解Parcel:快速,零配置web应用打包工具。

    译者按: 新一代Web应用打包工具Parcel横空出世,快速.零配置的特点让人眼前一亮. 原文: Everything You Need To Know About Parcel: The Blazi ...

  2. Parcel.js + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  3. Parcel + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  4. SpringMVC4零配置--web.xml

    servlet3.0+规范后,允许servlet,filter,listener不必声明在web.xml中,而是以硬编码的方式存在,实现容器的零配置. ServletContainerInitiali ...

  5. SpringMVC4零配置--Web上下文配置【MvcConfig】

    与SpringSecurity的配置类似,spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明. ...

  6. Parcel上手——又一个打包工具

    Parcel是什么? 极速零配置Web应用打包工具 说到打包工具,大多人应该都用过Webpack,Parcel也是这一类工具. Parcel相比Webpack有什么优势? 配置简单 打包速度快 以下是 ...

  7. 原创全新打包工具Parcel零配置VueJS开发脚手架

    parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/p... 初 ...

  8. 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具

    前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...

  9. 使用parcel打造一个零配置的react工作流

    parcel是一个前端打包工具.因其推崇的零配置理念,和webpack形成了鲜明对比.对于我这样一个被后端IDE智能提示宠坏的猿,自然是对webpack提不起爱.平时也都是使用CLI默认配置好webp ...

随机推荐

  1. 【洛谷P1462】通往奥格瑞玛的道路

    题目大意:给定一个 N 个点,M 条边的无向图,求从 1 号节点到 N 号节点的路径中,满足路径长度不大于 B 的情况下,经过顶点的点权的最大值最小是多少. 题解:最大值最小问题一般采用二分答案.这道 ...

  2. mysql、mybatis遇到问题集合

    1.错误描述 使用JDBC连接MySql时出现:The server time zone value '�й���׼ʱ��' is unrecognized or represents more th ...

  3. openstack遇到的错误

    错误1:运行python脚本,提示401错误(未授权) 解决方法:我的是因为版本问题,注意变量名称等 学新版本吧........

  4. Zookeeper可视化工具

    zkui 简介 zkui它提供了一个管理界面,可以针对zookeepr的节点值进行CRUD操作,同时也提供了安全认证. 下载安装 项目地址 下载 $ git clone https://github. ...

  5. Matrix67|自由职业者,数学爱好者

    Matrix67|自由职业者,数学爱好者 介绍一下你自己和所做的工作. 我叫顾森,网名 Matrix67,长住北京的重庆人,目前没有固定的职业.一会儿当当码农,一会儿做做编辑,一会儿教教数学,一会儿写 ...

  6. JMS学习(六)--提高非持久订阅者的可靠性 以及 订阅恢复策略

    一,非持久订阅者 和 实时消费消息 在这篇文章中区分了Domain为Pub/Sub.Destination为Topic时,消费者有两种:持久订阅者 和 非持久订阅者. 对于持久订阅者而言,只要订阅了某 ...

  7. ASP.NET保存信息总结(Application、Session、Cookie、ViewState和Cache等)

    以下是关于ASP.NET中保存各种信息的对象的比较,理解这些对象的原理,对制作完善的程序来说是相当有必要的(摘至互联网,并非原创--xukunping) 在ASP.NET中,有很多种保存信息的对象.例 ...

  8. 20155212 2016-2017-2 《Java程序设计》第6周学习总结

    20155212 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Chapter10 输入串流为java.io.InputStream,输出串流为java.i ...

  9. iOS-Socket编程体验

    CHENYILONG Blog Socket编程体验 Socket编程体验  技术博客http://www.cnblogs.com/ChenYilong/新浪微博http://weibo.com/lu ...

  10. Django用ajax进行post请求

    post请求有两种,跨域和不跨域 1.不跨域 # 不跨域的 view.py def re_json(request): print(request.POST['name']) p1 = Product ...