Parcel上手——又一個(gè)打包工具

cyqian 發(fā)布于2019-08-22 13:56 / 580人閱讀

摘要：是什么極速零配置應(yīng)用打包工具說到打包工具，大多人應(yīng)該都用過，也是這一類工具。這里結(jié)合文件命名你應(yīng)該知道為什么會(huì)有兩個(gè)文件了。直接上結(jié)論在內(nèi)部引用的情況下，修改文件內(nèi)容并不會(huì)實(shí)時(shí)更改頁面效果，內(nèi)部引入時(shí)無此問題。

Parcel是什么？

極速零配置Web應(yīng)用打包工具

說到打包工具，大多人應(yīng)該都用過Webpack，Parcel也是這一類工具。

Parcel相比Webpack有什么優(yōu)勢(shì)？

配置簡(jiǎn)單

打包速度快

以下是本人體驗(yàn)過程

使用npm安裝Parcel

$ npm install -g parcel-bundler

新建index.html index.js style-in-html.css style-in-js.css sass.scss

Style in HTML

Style in Js

Sass

// 以下是index.js文件內(nèi)容
console.log("Hello Parcel");

/* 以下是style-in-html.css文件內(nèi)容 */
p {
    color: red;
}

命令行運(yùn)行

parcel index.html

游覽器打開http://localhost:1234，效果如圖

直接修改style-in-html.css文件內(nèi)容

p {
    color: red;
    background-color: green;
}

游覽器依舊如上圖,手動(dòng)使用F5刷新后樣式才生效，可以確定監(jiān)聽到了文件變更，并進(jìn)行了編譯，但是未通知游覽器進(jìn)行響應(yīng)，或者此處游覽器并未正確響應(yīng)。這里結(jié)合文件命名你應(yīng)該知道為什么會(huì)有兩個(gè)css文件了。

直接上結(jié)論

在HTML內(nèi)部引用css的情況下，修改css文件內(nèi)容并不會(huì)實(shí)時(shí)更改頁面效果，Js內(nèi)部引入時(shí)無此問題。

編譯Sass只需要安裝node-sass即可在Js文件里面引用*.scss文件。注意：*.scss并不能像*.css文件一樣直接在HTML里面引用，必須在Js里面引用

npm install --save-dev node-sass

// 以下是sass.scss文件內(nèi)容
div {
    span {
        font-size: 80px;
        color: skyblue;
    }
}

// 在index.js文件里面引用sass.scss文件
import "./sass.scss";

效果如圖

使用TypeScript很方便，無需任何配置，直接引用*.ts文件即可。

最后

如果有哪里不對(duì)的歡迎指正。想了解更多關(guān)于Parcel的可以去官網(wǎng)

云服務(wù)器 GPU云服務(wù)器又一個(gè)典型實(shí)例 php項(xiàng)目又什么工具打包工具 python打包工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92656.html

相關(guān)文章

Parcel上手——又一個(gè)打包工具

摘要：是什么極速零配置應(yīng)用打包工具說到打包工具，大多人應(yīng)該都用過，也是這一類工具。這里結(jié)合文件命名你應(yīng)該知道為什么會(huì)有兩個(gè)文件了。直接上結(jié)論在內(nèi)部引用的情況下，修改文件內(nèi)容并不會(huì)實(shí)時(shí)更改頁面效果，內(nèi)部引入時(shí)無此問題。 Parcel是什么？極速零配置Web應(yīng)用打包工具說到打包工具，大多人應(yīng)該都用過Webpack，Parcel也是這一類工具。 Parcel相比Webpack有什么優(yōu)勢(shì)？配...

Dr_Noooo 2019-08-01 18:25 評(píng)論0 收藏0
Parcel上手——又一個(gè)打包工具

摘要：是什么極速零配置應(yīng)用打包工具說到打包工具，大多人應(yīng)該都用過，也是這一類工具。這里結(jié)合文件命名你應(yīng)該知道為什么會(huì)有兩個(gè)文件了。直接上結(jié)論在內(nèi)部引用的情況下，修改文件內(nèi)容并不會(huì)實(shí)時(shí)更改頁面效果，內(nèi)部引入時(shí)無此問題。 Parcel是什么？極速零配置Web應(yīng)用打包工具說到打包工具，大多人應(yīng)該都用過Webpack，Parcel也是這一類工具。 Parcel相比Webpack有什么優(yōu)勢(shì)？配...

printempw 2019-08-29 14:17 評(píng)論0 收藏0
2018前端值得關(guān)注的技術(shù)

摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家...

xiao7cn 2019-08-29 14:12 評(píng)論0 收藏0
2018前端值得關(guān)注的技術(shù)

摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家...

用戶84 2019-08-21 18:42 評(píng)論0 收藏0
匯總2017JS項(xiàng)目，總結(jié)我們從中學(xué)到了什么？

摘要：個(gè)人感悟自己公司也有項(xiàng)目在用，學(xué)的難點(diǎn)在于，其他的話上手挺快的，而且是尤大寫的，中文文檔也很完整，很適合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 當(dāng)紅辣子雞——vue 和去年一樣，vue是js項(xiàng)目中點(diǎn)贊數(shù)增加最多的，我們可以看下圖： showImg(https://se...

dantezhao 2019-08-22 13:55 評(píng)論0 收藏0