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的可以去官网
原文地址：https://www.cnblogs.com/baimeishaoxia/p/12050564.html
时间： 2024-10-07 18:18:33