Parcel上手——又一个打包工具

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Parcel上手——又一个打包工具相关的知识,希望对你有一定的参考价值。

Parcel是什么?

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

说到打包工具,大多人应该都用过WebpackParcel也是这一类工具。

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上手——又一个打包工具的主要内容,如果未能解决你的问题,请参考以下文章

前端打包工具进阶webpack到parcel

零配置打包工具 Parcel 实践

打包工具parcel的问题,求助

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

继webpack后又一打包神器Parcel

一个比webpack快10倍的打包工具