Ressources de colis
Ressources
Parcel est basé sur les ressources. Les ressources peuvent représenter n'importe quel fichier, mais Parcel prend en charge des types spécifiques de ressources tels que les fichiers JavaScript, CSS et HTML. Parcel analyse automatiquement les dépendances référencées dans ces fichiers et les inclut dans le bundle de sortie. Les ressources de types similaires sont regroupées dans le même package de sortie. Si vous importez un autre type de ressource (par exemple, si vous importez un fichier CSS dans JS), cela crée un nouveau sous-bundle et conserve une référence dans le parent. Ceci sera illustré dans la section suivante.
JavaScript
Web bundler (bundler) Le type de fichier le plus traditionnel est JavaScript. Parcel prend en charge la syntaxe des modules CommonJS et ES6 pour l'importation de fichiers. Il prend également en charge la syntaxe de la fonction dynamique import() pour charger les modules de manière asynchrone, ce qui est abordé dans la section Fractionnement du code.
// 使用 CommonJS 语法导入模块
const dep = require('./path/to/dep');
// 使用 ES6 import 语法导入模块
import dep from './path/to/dep';Vous pouvez également importer des ressources non JavaScript, telles que des fichiers CSS et même des images, dans des fichiers JavaScript. Lorsque vous importez l'un de ces fichiers, il n'est pas en ligne comme certains autres bundles. Au lieu de cela, lui et toutes ses dépendances sont placés dans un seul ensemble (comme un fichier CSS). Lors de l'utilisation de modules CSS, les classes exportées sont placées dans des bundles JavaScript. D'autres types de ressources exporteront une URL vers le fichier de sortie du package JavaScript, afin que vous puissiez les référencer dans votre code.
// 导入一个 CSS 文件 import './test.css'; // 通过 CSS modules 导入一个 CSS 文件 import classNames from './test.css'; // 通过URL 导入一个 image 文件 import imageURL from './test.png';
Si vous souhaitez intégrer un fichier dans un bundle JavaScript au lieu de le référencer via une URL, vous pouvez le faire en utilisant l'API fs.readFileSync dans Node.js. L'URL doit être analysable de manière statique, ce qui signifie qu'elle ne peut contenir aucune variable (sauf __dirname et __filename).
import fs from 'fs'; // 以字符串形式读取内容 const string = fs.readFileSync(__dirname + '/test.txt', 'utf8'); // 以 缓冲区(Buffer)形式读取内容 const buffer = fs.readFileSync(__dirname + '/test.png');
CSS
Les ressources CSS peuvent être importées dans des fichiers JavaScript ou HTML, et peuvent inclure des dépendances référencées via la syntaxe @import, ainsi que des images de référence, des polices, etc. via la fonction url(). D'autres fichiers CSS @imported sont intégrés dans le même bundle CSS et les références url() sont réécrites dans leurs noms de fichiers de sortie. Tous les noms de fichiers doivent être relatifs au fichier CSS actuel.
/* 导入另一个 CSS 文件 */
@import './other.css';
.test {
/* 引用一个 image 文件 */
background: url('./images/background.png');
}En plus du CSS pur, d'autres langages compilés vers CSS tels que LESS, SASS et Stylus sont également pris en charge et fonctionnent de la même manière.
SCSS
La compilation SCSS nécessite le module node-sass. Vous pouvez l'installer en utilisant npm :
npm install node-sass
Une fois node-sass installé, vous pouvez importer des fichiers SCSS dans vos fichiers JavaScript.
import './custom.scss'
Les dépendances dans les fichiers SCSS peuvent utiliser l'instruction @import.
HTML
Les ressources HTML sont généralement les fichiers d'entrée que vous fournissez à Parcel, mais peuvent également être référencées par des fichiers JavaScript, par exemple, pour fournir des liens vers d'autres pages Web. Les URL des scripts, styles, médias et autres fichiers HTML sont extraites et compilées comme décrit ci-dessus. Les citations sont réécrites en HTML afin qu'elles soient liées au fichier de sortie correct. Tous les noms de fichiers doivent être relatifs au fichier HTML actuel.
<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>
