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