Menggunakan Parcel sebagai Bundler untuk Aplikasi React

Webpack bukanlah satu -satunya permainan di bandar untuk pengurusan aset. Parcel menawarkan alternatif yang menarik, menyediakan bundling aset yang diselaraskan dengan konfigurasi sifar. Tidak seperti bundlers lain yang menuntut kod persediaan yang luas, kesederhanaan Parcel adalah kelebihan utama. Kelajuannya juga patut diberi perhatian, memanfaatkan pemprosesan multicore untuk masa membina lebih cepat berbanding dengan bundlers yang lebih kompleks.

Ciri -ciri utama dan faedah bungkusan termasuk:

• Kod yang cekap memisahkan melalui import dinamik.
• Pengendalian aset serba boleh untuk pelbagai jenis fail, termasuk HTML, CSS, dan JavaScript.
• Penggantian Modul Panas (HMR) untuk perkembangan pesat tanpa penyegaran halaman yang berterusan.
• Kesilapan yang jelas menonjolkan dalam konsol untuk debugging yang lebih mudah.
• Sokongan untuk pembolehubah persekitaran untuk menguruskan tetapan pembangunan dan pengeluaran.
• Mod pengeluaran yang dioptimumkan untuk membina lebih cepat dengan menghapuskan langkah -langkah yang tidak perlu.

Artikel ini menunjukkan cara membina projek React menggunakan Parcel, mempamerkan alternatif untuk membuat aplikasi React. Mari kita meneroka pendekatan yang berbeza untuk bertindak balas.

Persediaan Projek

1. Buat Direktori Projek:

 mkdir csstricks-react-parcel && cd $ _

2. Inisialisasi package.json : Gunakan sama ada NPM atau Benang:

 # npm
npm init -y

# Benang (digunakan dalam tutorial ini)
benang init -y

3. Pasang kebergantungan: Pasang bungkusan dan babel tempatan:

 Benang Tambah Parcel-Bundler Babel-Preset-ENV Babel-Preset-React-
benang tambah reaksi reaksi

4. Konfigurasikan Babel: Buat fail .babelrc dengan kandungan berikut:

 {
  "Pratetap": ["env", "React"]
}

5. Buat index.js (komponen aplikasi):

 Import bertindak balas daripada 'bertindak balas';
Import Reactdom dari 'React-Dom';

Aplikasi Kelas memanjangkan React.Component {
  render () {
    kembali (
      <react.fragment><h2 id="Helo">Helo!</h2></react.fragment>
    );
  }
}

const rootelement = document.getElementById ("root");
Reactdom.render (<app></app> , rootelement);

6. Buat index.html (dalam direktori src ):

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Contoh React Parcel</title>


  <div id="root"></div>

7. Konfigurasikan package.json (Mula Skrip):

 "Skrip": {
  "Mula": "Node_env = Parcel Pembangunan Src/Index.html --open"
}

8. Jalankan permohonan: Laksanakan yarn start di terminal anda. Aplikasi ini harus dilancarkan di penyemak imbas anda di http://localhost:1234/ .

Gaya dengan sass

Parcel termasuk postcss. Untuk menggunakan SASS, pasang pakej yang diperlukan:

 Benang Tambah-Autoprefixer Node-Sass

Konfigurasikan package.json 'S postcss Seksyen (jika diperlukan):

 "Postcss": {
  "Modul": palsu,
  "Plugin": {
    "AutoPrefixer": {
      "Pelayar": ["> 1%", "4 versi terakhir", "Firefox ESR", "Tidak IE <h3 id="Pengeluaran-membina"> Pengeluaran membina</h3><p> Konfigurasikan <code>package.json</code> anda untuk pengeluaran pengeluaran:</p><pre class="brush:php;toolbar:false"> "Skrip": {
  "Mula": "node_env = pembangunan bungkusan src/index.html --open",
  "membina": "node_env = bungkusan pengeluaran membina dist/ index.html --public-url ./"
}

Jalankan yarn build untuk membuat binaan siap pengeluaran dalam folder dist . Pilihan seperti --out-dir , --no-minify , dan --no-cache menawarkan penyesuaian selanjutnya.

Omong kosong (buat bungkusan aplikasi reaksi)

Buat Parcel App React (CRAP) Memudahkan Persediaan Projek:

 NPX CREATE-REACT-APP-PARCEL MY-app
cd my-app
Benang bermula

Kesimpulan

Kemudahan penggunaan Parcel dan masa binaan yang dioptimumkan menjadikannya pesaing yang kuat untuk projek React anda yang seterusnya. Populariti yang semakin meningkat (30,000 bintang GitHub) bercakap kepada penerimaan komuniti.

Sumber

• Contoh bungkusan
• Bungkusan yang mengagumkan

Repositori GitHub untuk kod sumber tutorial ini (pautan yang akan disediakan).

Atas ialah kandungan terperinci Menggunakan Parcel sebagai Bundler untuk Aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!