Parcel上手——又一个打包工具
2024-10-15 23:06:23
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
的可以去官网
最新文章
- 【JavaScript吉光片羽】遭遇IE8
- Windows 2003 EE升级服务错误号:0x8DDD0018 解决办法
- 【NodeJS线程】Boss和他的职员们
- digitalocean添加ssh_keys
- 嵌入值和序列化LOB
- webdriver(python)学习笔记五——层级定位
- python 安装PyV8 和 lxml
- 设计模式19---设计模式之状态模式(State)(行为型)
- 『openframeworks』shader制作三角形马赛克效果
- Nginx 配置基于域名的虚拟
- appium初学者,使用之检查appium环境报错Could not detect Mac OS X Version from sw_vers output: &#39;10.12.1’,
- my new start
- PC逆向之代码还原技术,第五讲汇编中乘法的代码还原
- MD5在线加密的应用
- mysql登录密码相关
- gcc dynamic load library
- java⑥
- C结构体数组赋值
- 设计模式之命令模式(Command)
- [Docker] Getting Started with Container Networks
热门文章
- VS2010 保护视力 背景色设置
- E - Apple Tree(树状数组+DFS序)
- Apsara Clouder专项技能认证:实现调用API接口
- 3)小案例三,加乐前端入口index.php
- Python之循环条件、变量、字符串格式化
- mysql索引详细介绍
- CentOS 5.5 --学习(1)
- [LC] 8. String to Integer (atoi)
- [LC] 136. Single Number
- MOOC(7)- case依赖、读取json配置文件进行多个接口请求-测试类中调用封装的mock(10)