Paketkonvertierung
Konvertierung
Obwohl viele Bundler die Installation und Konfiguration von Plug-Ins zum Konvertieren von Ressourcen erfordern, verfügt Parcel über viele integrierte Konvertierungen und Übersetzer, die Ihnen dies ermöglichen sofort einsatzbereit. Sie können Babel verwenden, um JavaScript, CSS mit PostCSS und HTML mit PostHTML zu transformieren. Parcel führt diese Transformationen automatisch aus, wenn Konfigurationsdateien (z. B. .babelrc , .postcssrc ) im Modul gefunden werden.
Dies funktioniert sogar in node_modules von Drittanbietern: Wenn die Konfigurationsdatei als Teil eines Pakets veröffentlicht wird, wird die Transformation automatisch aktiviert und gilt nur für dieses Modul. Da nur die Module verarbeitet werden, die konvertiert werden müssen, kann die Verpackung schnell erfolgen. Dies bedeutet auch, dass Sie Transformationen nicht manuell konfigurieren müssen, um bestimmte Dateien einzuschließen und auszuschließen, oder wissen müssen, wie Code von Drittanbietern erstellt wird, um ihn in Ihrer Anwendung verwenden zu können.
Babel
Babel ist ein beliebter JavaScript-Transpiler mit einem umfangreichen Plugin-Ökosystem. Sie verwenden Babel mit Parcel auf die gleiche Weise, wie Sie es allein oder in Verbindung mit anderen Paketierern verwenden.
Installieren Sie Voreinstellungen und Plugins in Ihrer App:
yarn add babel-preset-env
Erstellen Sie dann eine .babelrc-Datei:
{
"presets": ["env"]
}PostCSS
PostCSS ist ein Plugin, das CSS konvertiert Tools wie Autoprefixer, CSSnext und CSS-Module. Sie können Parcel dazu bringen, die PostCSS-Konfiguration zu verwenden, indem Sie eine Konfigurationsdatei mit einem der folgenden Namen erstellen: .postcssrc (JSON), .postcssrc.js oder postcss.config.js.
Installieren Sie das Plugin in Ihrer Anwendung:
yarn add postcss-modules autoprefixer
Erstellen Sie dann eine .postcssrc Datei:
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}Plugins werden im Schlüssel des Plugins-Objekts angegeben und Optionen werden mithilfe des Objektwerts definiert. Wenn das Plugin keine Optionen hat, setzen Sie es einfach auf true.
Die Zielbrowser für Autoprefixer, cssnext und andere Tools können in der Datei .browserslistrc angegeben werden:
> 1% last 2 versions
CSS-Module werden etwas anders aktiviert, indem der Modulschlüssel der obersten Ebene verwendet wird. Dies liegt daran, dass Parcel besondere Unterstützung für CSS-Module benötigt, da diese auch ein Objekt zur Aufnahme in das JavaScript-Bundle exportieren. Bitte beachten Sie, dass Sie in Ihrem Projekt noch Postcss-Module installieren müssen.
PostHTML
PostHTML ist ein Tool zum Konvertieren von HTML mithilfe von Plug-Ins. Sie können Parcel für die Verwendung von PostHTML konfigurieren, indem Sie eine Konfigurationsdatei mit einem der folgenden Namen erstellen: .posthtmlrc (JSON), posthtmlrc.js oder posthtml.config.js
Installieren Sie das Plugin in Ihrer Anwendung:
yarn add posthtml-img-autosize
Dann erstellen Sie eine .posthtmlrc-Datei:
{
"plugins": {
"posthtml-img-autosize": {
"root": "./images"
}
}
}Plugins werden im Schlüssel des Plugins-Objekts angegeben und die Optionsdefinition verwendet den Objektwert. Wenn das Plugin keine Optionen hat, setzen Sie es einfach auf true.
TypeScript
TypeScript ist eine Obermenge von JavaScript-Typen, die in gewöhnliches JavaScript kompiliert werden können. Es unterstützt auch moderne ES2015 -Funktionen. TypeScript kann ohne zusätzliche Konfiguration konvertiert werden.
<!-- 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";
