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

時間 2019-12-07

標籤 parcel 上手又一個打包工具简体版

原文原文鏈接

Parcel是什麼？

極速零配置Web應用打包工具

說到打包工具，大多人應該都用過Webpack，Parcel也是這一類工具。javascript

Parcel相比Webpack有什麼優點？

配置簡單
打包速度快

如下是本人體驗過程

使用npm安裝Parcelcss

$ npm install -g parcel-bundler

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

<!-- 如下是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;
}

命令行運行java

parcel index.html

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

直接修改style-in-html.css文件內容shell

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

遊覽器依舊如上圖,手動使用F5刷新後樣式才生效，能夠肯定監聽到了文件變動，並進行了編譯，可是未通知遊覽器進行響應，或者此處遊覽器並未正確響應。這裏結合文件命名你應該知道爲何會有兩個css文件了。npm

直接上結論

在HTML內部引用css的狀況下，修改css文件內容並不會實時更改頁面效果，Js內部引入時無此問題。

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

npm install --save-dev node-sass

// 如下是sass.scss文件內容
div {
    span {
        font-size: 80px;
        color: skyblue;
    }
}

// 在index.js文件裏面引用sass.scss文件
import './sass.scss';

效果如圖工具

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

最後

若是有哪裏不對的歡迎指正。想了解更多關於Parcel的能夠去官網

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。