Conversion de colis
Conversion
Bien que de nombreux bundles nécessitent que vous installiez et configuriez des plug-ins pour convertir les ressources, Parcel dispose de nombreuses conversions et traducteurs intégrés que vous pouvez utiliser immédiatement. Vous pouvez utiliser Babel pour transformer JavaScript, CSS à l'aide de PostCSS et HTML à l'aide de PostHTML. Parcel exécute automatiquement ces transformations lorsque des fichiers de configuration (par exemple .babelrc , .postcssrc ) sont trouvés dans le module.
Cela fonctionne même dans les node_modules tiers : si le fichier de configuration est publié dans le cadre d'un package, la transformation est automatiquement activée et s'applique uniquement à ce module. Puisque seuls les modules qui doivent être convertis sont traités, le conditionnement peut être effectué rapidement. Cela signifie également que vous n'avez pas besoin de configurer manuellement les transformations pour inclure et exclure certains fichiers, ni de savoir comment le code tiers est construit pour l'utiliser dans votre application.
Babel
Babel est un transpilateur JavaScript populaire doté d'un vaste écosystème de plugins. Vous utilisez Babel avec Parcel de la même manière que vous l'utilisez seul ou en conjonction avec d'autres conditionneurs.
Installez des préréglages et des plugins dans votre application :
yarn add babel-preset-env
Ensuite, créez un fichier .babelrc :
{
"presets": ["env"]
}PostCSS
PostCSS est un outil pour convertir du CSS avec des plugins, tels que le préfixe automatique, cssnext et les modules CSS. . Vous pouvez faire en sorte que Parcel utilise la configuration PostCSS en créant un fichier de configuration en utilisant l'un des noms suivants : .postcssrc (JSON), .postcssrc.js ou postcss.config.js
Installez le plugin dans votre application :
yarn add postcss-modules autoprefixer
Ensuite. , créez un fichier .postcssrc :
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}Le plugin est spécifié dans la clé de l'objet plugins, et la définition de l'option utilise la valeur de l'objet. Si le plugin n'a aucune option, définissez-le simplement sur true.
Les navigateurs cibles pour Autoprefixer , cssnext et d'autres outils peuvent être spécifiés dans le fichier .browserslistrc :
> 1% last 2 versions
Les modules CSS sont activés légèrement différemment, en utilisant la clé des modules de niveau supérieur. En effet, Parcel nécessite une prise en charge spéciale des modules CSS, car ils exportent également un objet à inclure dans le bundle JavaScript. Veuillez noter que vous devez toujours installer les modules postcss dans votre projet.
PostHTML
PostHTML est un outil qui utilise des plug-ins pour convertir du HTML. Vous pouvez configurer Parcel pour utiliser PostHTML en créant un fichier de configuration en utilisant l'un des noms suivants : .posthtmlrc (JSON), posthtmlrc.js ou posthtml.config.js
Installez le plugin dans votre application :
yarn add posthtml-img-autosize
Ensuite, créez un fichier .posthtmlrc :
{
"plugins": {
"posthtml-img-autosize": {
"root": "./images"
}
}
}Les plugins sont spécifiés dans la clé de l'objet plugins et la définition de l'option utilise la valeur de l'objet. Si le plugin n'a aucune option, définissez-le simplement sur true.
TypeScript
TypeScript est un sur-ensemble de types JavaScript qui peuvent être compilés en JavaScript ordinaire. Il prend également en charge les fonctionnalités ES2015+ modernes. TypeScript peut être converti sans aucune configuration supplémentaire.
<!-- index.html --> <html> <body> <script src="./index.ts"></script> </body> </html> // index.ts import message from "./message"; console.log(message); // message.ts export default "Hello, world";
