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

Dr_Noooo 發布于2019-08-01 18:25 / 581人閱讀

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

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

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

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

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

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

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

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

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

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

printempw 2019-08-29 14:17 評論0 收藏0
2018前端值得關注的技術

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

xiao7cn 2019-08-29 14:12 評論0 收藏0
2018前端值得關注的技術

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

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

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

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