国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

printempw / 3566人閱讀

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

Parcel是什么?
極速零配置Web應用打包工具

說到打包工具,大多人應該都用過WebpackParcel也是這一類工具。

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文件內容
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刷新后樣式才生效,可以確定監(jiān)聽到了文件變更,并進行了編譯,但是未通知游覽器進行響應,或者此處游覽器并未正確響應。這里結合文件命名你應該知道為什么會有兩個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的可以去官網

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

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113039.html

相關文章

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

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

    Dr_Noooo 評論0 收藏0
  • Parcel上手——一個打包工具

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

    cyqian 評論0 收藏0
  • 2018前端值得關注的技術

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

    xiao7cn 評論0 收藏0
  • 2018前端值得關注的技術

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

    用戶84 評論0 收藏0
  • 匯總2017JS項目,總結我們從中學到了什么?

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

printempw

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<