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

Dr_Noooo 發(fā)布于2019-08-01 18:25 / 592人閱讀

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

Parcel是什么？

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

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

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

配置簡單

打包速度快

以下是本人體驗過程

使用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;
}

命令行運行

parcel index.html

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

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

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

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

直接上結(jié)論

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

編譯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文件即可。

最后

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

GPU云服務(wù)器云服務(wù)器又一個典型實例 php項目又什么工具打包工具 python打包工具

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51724.html

相關(guān)文章

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

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

cyqian 2019-08-22 13:56 評論0 收藏0
Parcel上手——又一個打包工具

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

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

摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會興起，哪些技術(shù)會沒落。自從谷歌提出后，就持續(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ù)會興起，哪些技術(shù)會沒落。下面就我個人的判斷進(jìn)行一個預(yù)測判斷，希望能對大家...

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

摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會興起，哪些技術(shù)會沒落。自從谷歌提出后，就持續(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ù)會興起，哪些技術(shù)會沒落。下面就我個人的判斷進(jìn)行一個預(yù)測判斷，希望能對大家...

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

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

dantezhao 2019-08-22 13:55 評論0 收藏0