Gunakan Parcel untuk membungkus aplikasi HyperApp & digunakan ke halaman GitHub

Tutorial ini menunjukkan membina aplikasi HyperApp secara tempatan, menggabungkannya dengan bungkusan, dan menggunakannya ke halaman GitHub. Kami akan membuat aplikasi senarai tugasan, memanfaatkan modul ES6, JSX, SCSS, dan skrip NPM untuk aliran kerja yang cekap.

Konsep Utama:

• bungkusan: modul modul sifar konfigurasi memudahkan proses binaan.
• halaman github: platform untuk menganjurkan laman web statik dengan mudah. ​​
• HyperApp: Rangka Kerja JavaScript yang minimum untuk membina aplikasi web.
• modul ES6 & jsx: Ciri -ciri JavaScript moden ditangani secara automatik oleh Parcel.
• scss: digunakan untuk gaya, juga diproses oleh bungkusan.
• skrip npm: Automatikkan tugas seperti memulakan pelayan, bangunan, dan penyebaran.

Menyediakan projek:

Buat direktori projek (
1. dan mkdir hyperlist). cd hyperlist
Inisialisasi npm ().
2. npm init Pasang HyperApp (
).
3. npm install --save hyperapp Buat struktur folder yang diperlukan (
dan
4. ). mkdir -p src/js 3 src/scss Buat fail berikut dalam direktori
:
5. , src/js. state.js membuat actions.js dan view.js dalam direktori
.
6. src/scss index.scss Menambah kod: _settings.scss
7. Kod untuk index.html, index.js, dan src akan sama dengan contoh yang disediakan dalam artikel asal, menggunakan modul ES6 (
) untuk membuat komponen boleh diakses oleh

. Fail

menyediakan struktur HTML asas, manakala import dan memulakan aplikasi HyperApp.

Fail

mengandungi pembolehubah SCSS untuk fon dan warna, diimport ke state.js, yang mentakrifkan gaya aplikasi. Import actions.js ke view.js untuk menghubungkan gaya ke aplikasi. export default ... index.js index.html konfigurasi babel: index.js

Pasang Babel dan plugin JSX (_settings.scss). Buat fail index.scss dengan kandungan berikut: index.scss index.js

Integrasi Parcel:

Pasang Parcel (

). Tambahkan skrip npm berikut ke npm install --save babel-plugin-transform-react-jsx babel-preset-env: .babelrc

<code class="language-json">{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}</code>

RUN Untuk memulakan pelayan pembangunan. Jalankan npm start untuk membuat binaan pengeluaran dalam folder npm run build. Jalankan docs untuk membina dan menggunakan halaman github. npm run deploy

GitHub Pages Deployment:

Buat repositori github.
tambah fail
2. untuk mengecualikan fail yang tidak perlu (node_modules, dll.). .gitignore
Inisialisasi git (
3. ), tambah fail (git init), komit (git add .), dan tolak ke github (). git commit -m "Initial commit" git push origin master Dalam tetapan repositori GitHub anda, konfigurasikan halaman GitHub untuk menggunakan cawangan
dan
4. folder. master docs

Ringkasan aliran kerja:

: Mulakan pelayan pembangunan.
1. npm start Membangun dan menguji.
: Buat binaan pengeluaran.
3. npm run build
: Membina, komit, dan digunakan ke halaman GitHub.
4. npm run deploy
Sambutan yang disemak ini memberikan panduan yang lebih ringkas dan berstruktur, memberi tumpuan kepada langkah -langkah penting dan menggabungkan penambahbaikan utama yang dicadangkan. Ingatlah untuk menggantikan ruang letak seperti

dan

dengan butiran GitHub sebenar anda. Kod terperinci untuk setiap fail ditinggalkan untuk keringkasan, tetapi dapat dengan mudah disesuaikan dari contoh kod artikel asal. <username></username>

Atas ialah kandungan terperinci Gunakan Parcel untuk membungkus aplikasi HyperApp & digunakan ke halaman GitHub. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!