Parcel資源
資源
Parcel 基于資源的。資源可以代表任何文件，但 Parcel 對(duì) JavaScript ，CSS 和 HTML 文件等特定類型的資源有特殊的支持。Parcel 自動(dòng)分析這些文件中引用的依賴關(guān)系，并將其包含到 輸出包(output bundle) 中。相似類型的資源被組合在一起成為相同的輸出包。如果您導(dǎo)入不同類型的資源（例如，如果你在 JS 中導(dǎo)入了一個(gè) CSS 文件），它新建一個(gè)子包，并在父級(jí)中保留一個(gè)引用。這將在下面的部分中進(jìn)行舉例說明。
JavaScript
Web 打包器(bundler) 最傳統(tǒng)的文件類型是 JavaScript 。Parcel 支持 CommonJS 和 ES6 模塊語(yǔ)法來導(dǎo)入文件。它還支持動(dòng)態(tài) import() 函數(shù)語(yǔ)法來異步加載模塊，這在 代碼拆分 部分討論。
// 使用 CommonJS 語(yǔ)法導(dǎo)入模塊
const dep = require('./path/to/dep');
// 使用 ES6 import 語(yǔ)法導(dǎo)入模塊
import dep from './path/to/dep';你還可以在 JavaScript 文件導(dǎo)入非 JavaScript 資源， 例如 CSS ，甚至圖像文件。當(dāng)您導(dǎo)入其中一個(gè)文件時(shí)，它不像其他一些 打包器(bundler) 一樣內(nèi)聯(lián)的。相反，它及其所有依賴項(xiàng)被放置在一個(gè)單獨(dú)的包(bundle)（例如一個(gè) CSS 文件）中。當(dāng)使用 CSS Modules 時(shí)，導(dǎo)出的類被放置在 JavaScript 包中。其他資源類型將導(dǎo)出一個(gè) URL 到 JavaScript 包的輸出文件中，所以你可以在你的代碼中引用它們。
// 導(dǎo)入一個(gè) CSS 文件 import './test.css'; // 通過 CSS modules 導(dǎo)入一個(gè) CSS 文件 import classNames from './test.css'; // 通過URL 導(dǎo)入一個(gè) image 文件 import imageURL from './test.png';
如果你想將文件內(nèi)聯(lián)到 JavaScript 包中，而不是通過 URL 引用，你可以使用 Node.js 中的 fs.readFileSync API 來做到這一點(diǎn)。 URL 必須是靜態(tài)可分析的，這意味著它不能有任何變量（除了 __dirname 和 __filename ）。
import fs from 'fs'; // 以字符串形式讀取內(nèi)容 const string = fs.readFileSync(__dirname + '/test.txt', 'utf8'); // 以 緩沖區(qū)(Buffer)形式讀取內(nèi)容 const buffer = fs.readFileSync(__dirname + '/test.png');
CSS
CSS 資源 可以在 JavaScript 或 HTML 文件導(dǎo)入，并且可以通過 @import 語(yǔ)法包含引用的依賴關(guān)系，以及通過 url() 函數(shù)引用圖像，字體等。其他的 @import 的 CSS 文件被內(nèi)聯(lián)到同一個(gè) CSS 包中，并且 url() 引用被重寫為它們的輸出文件名。所有的文件名應(yīng)該是相對(duì)于當(dāng)前的 CSS 文件。
/* 導(dǎo)入另一個(gè) CSS 文件 */
@import './other.css';
.test {
/* 引用一個(gè) image 文件 */
background: url('./images/background.png');
}除了純 CSS ，還支持其他編譯成 CSS 語(yǔ)言，如 LESS ，SASS 和 Stylus ，并以相同的方式工作。
SCSS
SCSS編譯需要 node-sass 模塊?？梢杂?npm 來安裝它：
npm install node-sass
一旦 node-sass 安裝完成，你就可以在 JavaScript 文件中導(dǎo)入 SCSS 文件。
import './custom.scss'
SCSS 文件中的依賴可以使用 @import 語(yǔ)句。
HTML
HTML 資源通常是你提供給 Parcel 的入口文件，但也可以被 JavaScript 文件引用，例如，提供其他網(wǎng)頁(yè)的鏈接。腳本，樣式，媒體和其他 HTML 文件的 URL 被提取和編譯，如上所述。引用被重寫到 HTML 中，以便它們鏈接到正確的輸出文件。所有的文件名應(yīng)該是相對(duì)于當(dāng)前的 HTML 文件。
<html> <body> <!-- 引用一個(gè) image 文件 --> <img src="./images/header.png"> <a href="./other.html">Link to another page</a> <!-- 導(dǎo)入一個(gè) JavaScript 包 --> <script src="./index.js"></script> </body> </html>