Parcel資源

資源
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>

Parcel資源

PHP中文網