Penukaran bungkusan
Penukaran
Walaupun banyak pengikat memerlukan anda memasang dan mengkonfigurasi pemalam untuk menukar sumber, Parcel mempunyai banyak penukaran terbina dalam dan penterjemah untuk anda gunakan di luar kotak. Anda boleh menggunakan Babel untuk mengubah JavaScript, CSS menggunakan PostCSS dan HTML menggunakan PostHTML. Parcel secara automatik menjalankan transformasi ini apabila fail konfigurasi (cth. .babelrc , .postcssrc ) ditemui dalam modul.
Ini juga berfungsi dalam node_modules pihak ketiga: jika fail konfigurasi diterbitkan sebagai sebahagian daripada pakej, transformasi dihidupkan secara automatik dan hanya digunakan pada modul tersebut. Oleh kerana hanya modul yang memerlukan penukaran diproses, pembungkusan boleh dilakukan dengan cepat. Ini juga bermakna anda tidak perlu mengkonfigurasi transformasi secara manual untuk memasukkan dan mengecualikan fail tertentu, atau mengetahui cara kod pihak ketiga dibina untuk menggunakannya dalam aplikasi anda.
Babel
Babel ialah transpiler JavaScript yang popular dengan ekosistem pemalam yang luas. Anda menggunakan Babel dengan Parcel dengan cara yang sama anda menggunakannya secara bersendirian atau bersama-sama dengan pembungkus lain.
Pasang pratetap dan pemalam dalam aplikasi anda:
yarn add babel-preset-env
Kemudian, buat fail .babelrc:
{
"presets": ["env"]
}PostCSS
PostCSS adalah alat untuk menukar csss, CSSprex, autofix, dan CSS. . Anda boleh membuat Parcel menggunakan konfigurasi PostCSS dengan mencipta fail konfigurasi menggunakan salah satu daripada nama berikut: .postcssrc (JSON), .postcssrc.js, atau postcss.config.js
Pasang pemalam dalam aplikasi anda:
yarn add postcss-modules autoprefixer
Kemudian. , cipta fail .postcssrc:
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}Pemalam ditentukan dalam kunci objek pemalam dan definisi pilihan menggunakan nilai objek. Jika pemalam tidak mempunyai pilihan, tetapkan ia kepada benar.
Pelayar sasaran untuk Autoprefixer, cssnext dan alatan lain boleh ditentukan dalam fail .browserslistrc:
> 1% last 2 versions
Modul CSS didayakan sedikit berbeza, menggunakan kekunci modul peringkat atas. Ini kerana Parcel memerlukan sokongan khas untuk Modul CSS, kerana ia juga mengeksport objek untuk dimasukkan ke dalam berkas JavaScript. Sila ambil perhatian bahawa anda masih perlu memasang postcss-modules dalam projek anda.
PostHTML
PostHTML ialah alat untuk menukar HTML menggunakan pemalam. Anda boleh mengkonfigurasi Parcel untuk menggunakan PostHTML dengan mencipta fail konfigurasi menggunakan salah satu daripada nama berikut: .posthtmlrc (JSON), posthtmlrc.js atau posthtml.config.js
Pasang pemalam dalam aplikasi anda:
yarn add posthtml-img-autosize
Kemudian , buat fail .posthtmlrc:
{
"plugins": {
"posthtml-img-autosize": {
"root": "./images"
}
}
}Pemalam dinyatakan dalam kunci objek pemalam dan definisi pilihan menggunakan nilai objek. Jika pemalam tidak mempunyai pilihan, tetapkan ia kepada benar.
TypeScript
TypeScript ialah superset jenis JavaScript yang boleh disusun menjadi JavaScript biasa Ia juga menyokong ciri ES2015+ moden. TypeScript boleh ditukar tanpa sebarang konfigurasi tambahan.
<!-- 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";
