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上手——又一个打包工具的更多相关文章

  1. parcel (另一个打包工具)知识点

    ParcelJS 本身是 0 配置的,但 HTML.JS 和 CSS 分别是通过 posthtml.babel 和 postcss 处理的,所以我们得分别配 .posthtmlrc..babelrc ...

  2. 写你自己 android 多通道打包工具 可以包libs和.so文件

    android上传应用程序,需要区分各个信道. 通常更改配置文件中的一个通道id,假设有多个通道,手动更改并生成apk这将是非常麻烦的,及增加误差的概率. 在这个课堂上分享一个打包工具.也可在网上类似 ...

  3. Vue(基础七)_webpack打包工具用法（上）

    一.前言 1.webpack原理 二.主要内容 1.webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,web ...

  4. linux下压缩与打包工具——gzip, bzip2 和 tar；

    以下内容来自:阿铭http://www.apelearn.com/study_v2/chapter11.html, 把常用的写出来了:感觉可以了: 只管压缩与解压缩的工具: gzip 工具: 用的时候 ...

  5. 打包工具的核心原理（转自：https://juejin.im/entry/5b223ebd518825748b569bda）

    打包工具就是负责把一些分散的小模块,按照一定的规则整合成一个大模块的工具.与此同时,打包工具也会处理好模块之间的依赖关系,最终这个大模块将可以被运行在合适的平台中. 打包工具会从一个入口文件开始,分析 ...

  6. java的jar打包工具的使用

    java的jar打包工具的使用 java的jar是一个打包工具,用于将我们编译后的class文件打包起来,这里面主要是举一个例子用来说明这个工具的使用. 在C盘下的temp文件夹下面:         ...

  7. Parcel极速零配置Web应用打包工具

    当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在webpack打包的配置,这个零配置着实让我好奇不已,迅速学习一波. Parcel(parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl])有以 ...

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

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

  9. 详解Parcel：快速，零配置web应用打包工具。

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

随机推荐

  1. iOS转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码

    iOS精选源码 view controller transition and popover (控制器转场和弹窗) UITableView头部悬停+UITableView侧滑嵌套 一行代码集成时间选择 ...

  2. java面试和笔试大全

    2.String是最基本的数据类型吗? 基本数据类型包括byte.int.char.long.float.double.boolean和short. java.lang.String类是final类型 ...

  3. linux上部署jenkins

    http://www.pianshen.com/article/1133171043/相关jenkins链接 下载jenkins的war包:https://blog.csdn.net/Aaron_Zh ...

  4. <c:if >标签的坑！！

    <c:if test="${trans.Transition}"> <input id="${trans.nextnode}" type=&q ...

  5. [LC] 78. Subsets

    Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The solut ...

  6. NIO与IO

    待续... 该文章部分摘自:http://tutorials.jenkov.com/java-nio/index.html 一.I/O简介 I/O(英语:Input/Output),即输入/输出, 指 ...

  7. Qt 编译出现 error LNK2019: 无法解析的外部符号

    编辑完成后执行"构建->执行qmake",完成(必须要执行qmake).

  8. django+nginx+gunicorn+supervisro部署

    一.nginx 1.yum install -y nginx  #默认安装后的配置文件路径:/etc/nginx/nginx.conf 2.新建项目的配置文件,因为默认配置文件会包含子配置文件,目录为 ...

  9. HttpClient学习笔记

    HttpClient相关的实体类官方文档地址:http://hc.apache.org/httpcomponents-client-ga/httpclient/apidocs/ 使用HttpClien ...

  10. python循环删除list中的元素

    直接上例子: a = [1,2,3,4,5,6] for i in a: a.remove(i) print(a) 返回:[2, 4, 6] 循环a,想删除a的所有元素,但实际确有数据保留了下来,这是 ...