Paketressourcen
Ressourcen
Paket ist ressourcenbasiert. Ressourcen können jede beliebige Datei darstellen, Parcel bietet jedoch spezielle Unterstützung für bestimmte Arten von Ressourcen wie JavaScript-, CSS- und HTML-Dateien. Parcel analysiert automatisch die in diesen Dateien referenzierten Abhängigkeiten und fügt sie in das Ausgabepaket ein. Ressourcen ähnlichen Typs werden im selben Ausgabepaket zusammengefasst. Wenn Sie einen anderen Ressourcentyp importieren (z. B. wenn Sie eine CSS-Datei in JS importieren), wird ein neues Unterpaket erstellt und eine Referenz im übergeordneten Paket beibehalten. Dies wird im folgenden Abschnitt beispielhaft erläutert.
JavaScript
Web Bundler Der traditionellste Dateityp ist JavaScript. Parcel unterstützt die CommonJS- und ES6-Modulsyntax zum Importieren von Dateien. Es unterstützt auch die Syntax der dynamischen import()-Funktion zum asynchronen Laden von Modulen, was im Abschnitt zur Codeaufteilung erläutert wird.
// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';Sie können auch Nicht-JavaScript-Ressourcen wie CSS und sogar Bilddateien in JavaScript-Dateien importieren. Wenn Sie eine dieser Dateien importieren, erfolgt sie nicht inline wie bei einigen anderen Bundlern. Stattdessen werden es und alle seine Abhängigkeiten in einem einzigen Paket (z. B. einer CSS-Datei) platziert. Bei Verwendung von CSS-Modulen werden exportierte Klassen in JavaScript-Bundles platziert. Andere Ressourcentypen exportieren eine URL in die Ausgabedatei des JavaScript-Pakets, sodass Sie in Ihrem Code darauf verweisen können.
// 导入一个 CSS 文件 import './test.css'; // 通过 CSS modules 导入一个 CSS 文件 import classNames from './test.css'; // 通过URL 导入一个 image 文件 import imageURL from './test.png';
Wenn Sie eine Datei in ein JavaScript-Bundle integrieren möchten, anstatt sie über eine URL zu referenzieren, können Sie dies mithilfe der fs.readFileSync-API in Node.js tun. Die URL muss statisch analysierbar sein, d. h. sie darf keine Variablen enthalten (außer __dirname und __filename).
import fs from 'fs'; // 以字符串形式读取内容 const string = fs.readFileSync(__dirname + '/test.txt', 'utf8'); // 以 缓冲区(Buffer)形式读取内容 const buffer = fs.readFileSync(__dirname + '/test.png');
CSS
CSS-Ressourcen können in JavaScript- oder HTML-Dateien importiert werden, und referenzierte Abhängigkeiten können über die @import-Syntax eingebunden werden sowie über die Funktion url() referenziert Bilder, Schriftarten usw. Andere @imported CSS-Dateien werden in dasselbe CSS-Bundle eingebunden und url()-Referenzen werden in ihre Ausgabedateinamen umgeschrieben. Alle Dateinamen sollten relativ zur aktuellen CSS-Datei sein.
/* 导入另一个 CSS 文件 */
@import './other.css';
.test {
/* 引用一个 image 文件 */
background: url('./images/background.png');
}Neben reinem CSS werden auch andere zu CSS kompilierte Sprachen wie LESS, SASS und Stylus unterstützt und funktionieren auf die gleiche Weise.
SCSS
Für die SCSS-Kompilierung ist das Node-Sass-Modul erforderlich. Sie können es mit npm installieren:
npm install node-sass
Sobald Node-Sass installiert ist, können Sie die SCSS-Datei in Ihre JavaScript-Datei importieren.
import './custom.scss'
Abhängigkeiten in SCSS-Dateien können die @import-Anweisung verwenden.
HTML
HTML-Ressourcen sind normalerweise die Eintragsdateien, die Sie Parcel zur Verfügung stellen, können aber auch durch JavaScript-Dateien referenziert werden, um beispielsweise Links zu anderen Webseiten bereitzustellen . URLs für Skripte, Stile, Medien und andere HTML-Dateien werden wie oben beschrieben extrahiert und kompiliert. Zitate werden in HTML umgeschrieben, sodass sie auf die richtige Ausgabedatei verweisen. Alle Dateinamen sollten relativ zur aktuellen HTML-Datei sein.
<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>
