从 webpack 到全面拥抱 Parcel #1 探索 Parcel
最近大家都在关注一个很流行的类似 webpack 的前端构建工具 Parcel。这个库刚出来没多久(好像截至目前十几天),但是很受欢迎,看下图就知道。
所以值得一探!
官方地址:https://parceljs.org/
github 地址:https://github.com/parcel-bundler/parcel
介绍这个库之前,我们来说一下我个人觉得 webpack 的一些不好的地方(相对于 Parcel)。
需要写配置文件(webpack.config.js),可能每使用一个功能,比如加载图片或 css,都要添加配置,要维护配置文件,而 Parcel 不需要。
感觉编译或加载速度有些慢,特别是库多或项目复杂的时候,虽然有一些办法代码拆分的方法可以解决,比如 CommonsChunkPlugin 或 DLLPlugin 之类的,但这些方法有些复杂。
- 需要一定的时间去学习如何使用 webpack。
而 Parcel 有很多优点,可以不使用配置文件,也就是说你只管写代码,它会自动运行,很智能化,打个比方吧,比如在 webpack 中如果要处理 css,那得要安装和加载一个 css 的 loader,然后配置文件写上几行,可是 Parcel 不需要,直接用就行。Parcel 学习起来比较简单,基本上可以说 "不用学习",只是使用就可以了。
除此之外,模块热替换和代码拆分的功能,Parcel 也有,还有,如果要你用 Parcel 写一个 react 的运行环境,可能不需要配置任何内容,只要安装几个 react 的包就可以用起来了。
说了这么多,我还是要把官方对它的特性进行概括的图片放出来:
下面我们要开始来体验 parcel 的神奇之处,请跟紧。(源码我放到 https://github.com/hfpp2012/hello-parcel)
1. 安装
$ npm install -g parcel-bundler
复制代码
然后初始化一个项目。
$ mkdir parcelapp
$ npm init
复制代码
2. 初体验
新建 html 文件。(这个将会是 parcel 的入口文件)
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>Joke Generator</title>
</head>
<body><div id="wrap"><h1>Joke</h1><h3 id="joke"></h3></div><p id="copy"></p><script src="./index.js"></script>
</body>
</html>
复制代码
index.js
console.log('Hello');
复制代码
运行编译命令。
$ parcel index.html
复制代码
注意:上面的 parcel 命令接的是 html 文件,它会读 html 文件的内容,找到 javascript 文件,进行自运处理,不用像 webpack 那样,还要指定 javascript 的入口文件啥的。
生成了 dist
目录。
dist
├── index.html
└── parcelapp.js
复制代码
监听在 1234 端口,浏览器效果如下:
3. CommonJS 模块语法
新建 jokes.js 文件。
jokes.js
module.exports = {getOne: function () {return new Promise((resolve, reject) => {// 这个 api 是公开的。fetch('http://api.icndb.com/jokes/random').then(res => res.json()).then(data => {resolve(data.value.joke);})})}
}
复制代码
index.js
const jokes = require('./jokes');jokes.getOne().then(joke => {document.getElementById('joke').innerHTML = joke;});
复制代码
效果如下:
4. ES6 模块语法
require
改成 import
,如下所示:
index.js
// const jokes = require('./jokes');import { jokes } from './jokes';jokes.getOne().then(joke => {document.getElementById('joke').innerHTML = joke;});
复制代码
jokes.js
export const jokes = {getOne: function () {return new Promise((resolve, reject) => {fetch('http://api.icndb.com/jokes/random').then(res => res.json()).then(data => {resolve(data.value.joke);})})}
}
复制代码
5. 使用 axios 代替 fetch
这只是为了演示使用一些库。
首先安装 axios。
$ npm install axios
复制代码
注意,这里每安装一个库,都要重新运行 parcel index.html
jokes.js
import axios from 'axios';export const jokes = {getOne: function() {return new Promise((resolve, reject) => {axios.get('http://api.icndb.com/jokes/random').then(res => {resolve(res.data.value.joke);})})}
}
复制代码
6. 使用 jquery 代替 getElementById
$ npm install jquery
复制代码
index.js
import { jokes } from './jokes';
import $ from 'jquery';jokes.getOne().then(joke => {// document.getElementById('joke').innerHTML = joke;$('#joke').text(joke);});
复制代码
7. 导入 非 JavaScript 资源
copyright.txt
Copyright 2018
复制代码
index.js
import fs from 'fs';...const copy = fs.readFileSync(__dirname + '/copyright.txt', 'utf8');$('#copy').text(copy);
复制代码
8. 简单处理 css
style.css
h1 {color: red;padding-right: 1rem;
}#wrap {display: flex;justify-content: center;align-content: center;align-items: center;padding: 5px;border: 1px solid #333;border-radius: 4px;box-shadow: 0 10px 10px rgba(0, 0, 0, 0.12);
}
复制代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>...<link rel="stylesheet" href="style.css" /><title>Joke Generator</title>
</head>
<body>...
</body>
</html>
复制代码
9. 在 css 中使用 import
backgrounds.css
body {background: #f4f4f4;
}
复制代码
style.css
@import './backgrounds.css';...
复制代码
10. 使用 sass
首先,安装 node-sass。
$ npm install node-sass
复制代码
这里要花费一定时间,请耐心等待
backgrounds.scss
注意:这里由 backgrounds.css 改名为 backgrounds.scss
@import './variables.scss';body {background: $light-grey;
}
复制代码
variables.scss
$light-grey: #f4f4f4;
复制代码
style.css
/* 改名为 scss */
@import './backgrounds.scss';
...
复制代码
Parcel 还有很多好玩的,我们以后再说。
从 webpack 到全面拥抱 Parcel #1 探索 Parcel相关推荐
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML
基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 参考文章: (1)基于webpack的前端工程化开发解决方案探索(一):动态生成HTML (2)https://www.cnbl ...
- 大数据先驱Cloudera拥抱云计算,探索后Hadoop时代的下一代数据平台
未来十年,企业数据管理模式将如何进化?Cloudera 的答案是 - 企业数据云. 在数据爆炸时代"掘金" 数字正在"吞噬"世界. 过去的十几年里,我们进入了一 ...
- 写博客的这几个月,获益良多 1
1.前言 也将近过年了,看了那么多人搞了年会总结.自己活跃社区这几个月,改变了不少,收获也不少.就想写下这段时间写文章的一些总结,统计下'成绩',说下感想,就写了这篇文章.这次总结的关键词就是:2.( ...
- 探索Android中的Parcel机制(上)
一.先从Serialize说起 我们都知道JAVA中的Serialize机制,译成串行化.序列化--,其作用是能将数据对象存入字节流其中,在须要时又一次生成对象.主要应用是利用外部存储设备保存对象状态 ...
- 探索Android中的Parcel机制(上) .
一.先从Serialize说起 我们都知道JAVA中的Serialize机制,译成串行化.序列化--,其作用是能将数据对象存入字节流当中,在需要时重新生成对象.主要应用是利用外部存储设备保存对象状态, ...
- WebPack在多页应用项目中的探索
WebPack在项目配置中的探索(持续更新中) webpack + gulp + vue (thinkPHP后台配置) 一.项目需求(请认真看目录结构,项目构建很大都基于目录来的) --- Appli ...
- 前端工资涨不上去?可能是你没掌握构建工具:关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
每个前端都应该掌握构建工具 大概从 2019 年到现在的这三年多的时间里,构建工具几乎已经成为前端发展最快的一个部分. 构建工具,属于前端工程化领域.而前端工程化,是每一个高级前端开发人员都必须要去深 ...
- android 进程间通信数据(一)------parcel的起源
关于parcel,我们先来讲讲它的"父辈" Serialize. Serialize 是java提供的一套序列化机制.但是为什么要序列化,怎么序列化,序列化是怎么做到的,我们将在本 ...
- 为什么我会放弃 Webpack 而选择 Vite
[CSDN 编者按]如今对于每一位前端工程师来说,Webpack 已经成为一项基础技能,它基本上包办了本地开发.编译压缩.程序打包等工作.从这个角度来看,Webpack 确实是伟大的,但即使它如此伟大 ...
最新文章
- 一篇文章回顾智源悟道 1.0 发布全程
- UA MATH523A 实分析3 积分理论 概念与定理整理
- boost::units::quantity相关的测试程序
- ConcurrentModificationException并发修改异常
- PAT1045 快速排序 (25 分)【4/6通过】
- android自动退出对话框,Android开发 在用EditText对话框Dialog退出后实现输入盘的退出...
- 小程序json字符串取值问题,怎么取出来的是undefined,eval函数不能用?
- c语言贪吃蛇黑方框,[求助][贪吃蛇]源程序,请教其中一个问题。
- Git初学札记(七)————合并分支(merge)
- Java改环境变量把path修改了,CentOS查看和修改PATH环境变量的方法
- 开源流媒体服务器:为何一定得再撸个新的 | 凌云时刻
- 从零开始学android编程_从零开始学机械,如何画好一张零件图?图文详解!-UG编程...
- 网页视频地址批量抓取工具(原创)
- 机器学习:训练集和测试集
- 使用Java生成思维导图
- PS修补工具使用方法
- Python爬虫 小白第一次爬虫
- 画象棋棋盘c语言程序设计教程课后答案,绘制中国象棋棋盘(c语言)
- ai人工智能将替代人类_AI和人类如何优化空气污染监测
- 微信运动刷步怎么用?微信运动刷步使用教程[多图]
热门文章
- 如何一夜暴富?这里有一份比特币价格预测指南
- 高速流水线,Jenkins Shared Pipeline
- 大厂需要这样的Java工程师
- 浅谈树形结构的特性和应用(上):多叉树,红黑树,堆,Trie树,B树,B+树......
- Java 程序员如何使用 Shiro 框架
- 聊一聊如何优雅地向程序员提问题
- 用PaddlePaddle打比赛!
- 明日发布组队学习计划!
- 剑指offer_第16题_合并两个排序的链表_Python
- PyTorch里这个bug,你知道吗?