Parcel上手——又一个打包工具
Parcel是什么？
极速零配置Web应用打包工具
说到打包工具，大多人应该都用过Webpack，Parcel也是这一类工具。
Parcel相比Webpack有什么优势？
- 配置简单
- 打包速度快
以下是本人体验过程
使用npm安装Parcel
$ npm install -g parcel-bundler新建index.html index.js style-in-html.css style-in-js.css sass.scss
<!-- 以下是index.html文件的片段内容（PS：仅截取重要部分代码） -->
<!-- 在index.html里面引入style-in-html.css文件 -->
<link rel="stylesheet" href="./style-in-html.css">
</head>
<body>
<p>Style in HTML</p>
<h1>Style in Js</h1>
<div>
<span>Sass<span>
</div>
<!-- 引入index.js文件 -->
<script src="./index.js"></script>
</body>// 以下是index.js文件内容
console.log('Hello Parcel');/* 以下是style-in-html.css文件内容 */
p {
color: red;
}命令行运行
parcel index.html游览器打开http://localhost:1234，效果如图
直接修改style-in-html.css文件内容
p {
color: red;
background-color: green;
}游览器依旧如上图,手动使用F5刷新后样式才生效，可以确定监听到了文件变更，并进行了编译，但是未通知游览器进行响应，或者此处游览器并未正确响应。这里结合文件命名你应该知道为什么会有两个css文件了。
直接上结论
在HTML内部引用css的情况下，修改css文件内容并不会实时更改页面效果，Js内部引入时无此问题。
编译Sass只需要安装node-sass即可在Js文件里面引用*.scss文件。注意：*.scss并不能像*.css文件一样直接在HTML里面引用，必须在Js里面引用
npm install --save-dev node-sass// 以下是sass.scss文件内容
div {
span {
font-size: 80px;
color: skyblue;
}
}// 在index.js文件里面引用sass.scss文件
import './sass.scss';效果如图
使用TypeScript很方便，无需任何配置，直接引用*.ts文件即可。
最后
如果有哪里不对的欢迎指正。想了解更多关于Parcel的可以去官网
Parcel上手——又一个打包工具的更多相关文章
- parcel (另一个打包工具)知识点
ParcelJS 本身是 0 配置的,但 HTML.JS 和 CSS 分别是通过 posthtml.babel 和 postcss 处理的,所以我们得分别配 .posthtmlrc..babelrc ...
- 写你自己 android 多通道打包工具 可以包libs和.so文件
android上传应用程序,需要区分各个信道. 通常更改配置文件中的一个通道id,假设有多个通道,手动更改并生成apk这将是非常麻烦的,及增加误差的概率. 在这个课堂上分享一个打包工具.也可在网上类似 ...
- Vue(基础七)_webpack打包工具用法（上）
一.前言 1.webpack原理 二.主要内容 1.webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,web ...
- linux下压缩与打包工具——gzip, bzip2 和 tar；
以下内容来自:阿铭http://www.apelearn.com/study_v2/chapter11.html, 把常用的写出来了:感觉可以了: 只管压缩与解压缩的工具: gzip 工具: 用的时候 ...
- 打包工具的核心原理（转自：https://juejin.im/entry/5b223ebd518825748b569bda）
打包工具就是负责把一些分散的小模块,按照一定的规则整合成一个大模块的工具.与此同时,打包工具也会处理好模块之间的依赖关系,最终这个大模块将可以被运行在合适的平台中. 打包工具会从一个入口文件开始,分析 ...
- java的jar打包工具的使用
java的jar打包工具的使用 java的jar是一个打包工具,用于将我们编译后的class文件打包起来,这里面主要是举一个例子用来说明这个工具的使用. 在C盘下的temp文件夹下面: ...
- Parcel极速零配置Web应用打包工具
当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在webpack打包的配置,这个零配置着实让我好奇不已,迅速学习一波. Parcel(parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl])有以 ...
- 原创全新打包工具Parcel零配置VueJS开发脚手架
parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/p... 初 ...
- 详解Parcel：快速，零配置web应用打包工具。
译者按: 新一代Web应用打包工具Parcel横空出世,快速.零配置的特点让人眼前一亮. 原文: Everything You Need To Know About Parcel: The Blazi ...
随机推荐
- Metric space,open set
目录 引入:绝对值 度量空间 Example: 开集,闭集 引入:绝对值 distance\(:|a-b|\) properties\(:(1)|x| \geq 0\),for all \(x \in ...
- day02-文件操作
文件操作. 1,文件路径:d:\python一定要学好.txt 2,编码方式:utf-8 gbk .... 3,操作模式:只读,只写,追加,读写,写读..... 不论哪种方式都只能执行一次.例如r模式 ...
- Codeforces Round#615 Div.3 解题报告
前置扯淡 真是神了,我半个小时切前三题(虽然还是很菜) 然后就开始看\(D\),不会: 接着看\(E\),\(dp\)看了半天,交了三次还不行 然后看\(F\):一眼\(LCA\)瞎搞,然后\(15m ...
- 调参、最优化、ml算法（未完成）
最优化方法 调参方法 ml算法 梯度下降gd grid search lr 梯度上升 随机梯度下降 pca 随机梯度下降sgd 贝叶斯调参 lda 牛顿算法 knn 拟牛顿算法 kmeans ...
- HTTP协议八种请求类型介绍
HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法.也可以利用向W ...
- vue项目中net::ERR_CONNECTION_TIMED_OUT错误
我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...
- python-倒序循环
有时候循环需要用到倒序,所以整理一下倒序循环的方法 方法1: 如果要倒序遍历访问序列中的元素,可以对该序列使用reversed() 函数,reversed函数会生成一份倒序列表的拷贝,但是不会改变原列 ...
- $(document).ready()和window.onload方法
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
- open()操作文件
open()函数用来读取.写文件 参数解释: r:只读 w:只写,此时进行读,会报错 a:只追加 r+:可读可写 w+:可读可写 a+:可读可写 rb\rb+\wb\wb+\ab\ab+ 针对二进制文 ...
- 吴裕雄--天生自然 python语言数据分析：开普勒系外行星搜索结果分析
import pandas as pd pd.DataFrame({'Yes': [50, 21], 'No': [131, 2]}) pd.DataFrame({'Bob': ['I liked i ...