Geekly articles weekly

Menggunakan Babel dan Webpack untuk mengatur proyek Bereaksi dari awal

Ada banyak alat yang tersedia untuk mempersiapkan lingkungan untuk pengembangan Bereaksi. Misalnya, tutorial Bereaksi kami menggunakan alat buat-reaksi-aplikasi untuk membuat proyek templat yang berisi semua yang Anda butuhkan untuk mengembangkan aplikasi Bereaksi. Penulis artikel, terjemahan yang kami terbitkan hari ini, ingin berbicara tentang cara mengkonfigurasi lingkungan untuk mengembangkan proyek Bereaksi menggunakan Babel dan Webpack secara mandiri. Alat-alat ini juga digunakan dalam proyek yang dibuat menggunakan alat buat-reaksi-aplikasi, dan kami percaya bahwa siapa pun yang mempelajari pengembangan Bereaksi akan tertarik untuk mengenal mereka dan dengan metodologi untuk membuat proyek Bereaksi di tingkat yang lebih dalam. Yaitu, kita akan berbicara tentang cara mengkonfigurasi Webpack sehingga alat ini akan menggunakan Babel untuk mengkompilasi kode JSX ke dalam kode JavaScript, dan bagaimana mengkonfigurasi server yang digunakan untuk mengembangkan proyek Bereaksi.



Paket web


Webpack digunakan untuk mengkompilasi modul JavaScript. Alat ini sering disebut "bundler" (dari bundler) atau "pembuat modul". Setelah menginstalnya , Anda dapat bekerja dengannya menggunakan antarmuka baris perintah atau API -nya. Jika Anda tidak terbiasa dengan Webpack, Anda disarankan untuk membaca tentang prinsip-prinsip dasar operasinya dan melihat perbandingannya dengan pembuat modul lainnya. Inilah yang, pada tingkat tinggi, seperti apa tampilan Webpack.


Webpack bekerja

Webpack mengambil semua yang bergantung pada proyek dan mengubahnya menjadi sumber daya statis yang dapat ditransfer ke klien. Pengemasan aplikasi sangat penting, karena sebagian besar browser membatasi kemampuan untuk mengunduh sumber daya secara bersamaan. Selain itu, ini memungkinkan Anda untuk menghemat lalu lintas dengan mengirimkan klien hanya apa yang dia butuhkan. Secara khusus, Webpack menggunakan cache internal, karena modul hanya diunduh ke klien sekali saja, yang pada akhirnya mengarah pada pemuatan situs yang lebih cepat.

Babel


Babel adalah sebuah transpiler, yang terutama digunakan untuk mengubah konstruksi yang diadopsi dalam versi terbaru dari standar ECMAScript menjadi format yang dapat dimengerti oleh browser modern dan bukan yang terbaru dan lingkungan lain di mana JavaScript dapat dijalankan. Babel, di samping itu, dapat dikonversi ke JavaScript dan kode JSX menggunakan @ babel / preset-react .


Babel

Berkat Babel, kami, ketika mengembangkan aplikasi Bereaksi, dapat menggunakan JSX. Misalnya, berikut adalah kode yang menggunakan JSX:

import React from "react"; function App(){ return(  <div>     <b>Hello world!</b>  </div> ) } export default App;

Kode seperti itu terlihat rapi, jelas, mudah dibaca dan diedit. Melihat itu, Anda dapat segera memahami bahwa itu menggambarkan komponen yang mengembalikan elemen <div> yang berisi teks Hello world! dalam huruf tebal. Dan di sini adalah contoh kode melakukan hal yang sama di mana JSX tidak digunakan:

 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement(   "div",   null,   _react2.default.createElement(     "b",     null,     "Hello world!"   ) ); } exports.default = App;

Keuntungan dari contoh pertama lebih dari yang kedua jelas.

Prasyarat


Untuk membuat proyek aplikasi Bereaksi, kita membutuhkan modul npm berikut.

  • reaksi - Bereaksi perpustakaan.
  • react-dom adalah perpustakaan yang akan membantu kami menggunakan kemampuan Bereaksi di browser.
  • babel / core - transpilasi JSX di JS.
  • babel / preset-env - buat kode yang cocok untuk browser yang lebih lama.
  • babel / preset-react - konfigurasikan transpiler agar berfungsi dengan React code.
  • babel-loader - konfigurasikan Webpack agar berfungsi dengan Babel.
  • css-loader - menyiapkan Webpack untuk bekerja dengan CSS.
  • webpack - perakitan modul.
  • webpack-cli - bekerja dengan Webpack dari baris perintah.
  • style-loader - memuat semua kode-CSS yang digunakan dalam header file HTML.
  • webpack-dev-server - menyiapkan server pengembangan.

Sekarang buat, di folder react-scratch , proyek baru menggunakan npm ( npm init ) dan instal beberapa paket di atas dengan perintah berikut:

 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server

Titik masuk ke program adalah file index.js , yang terkandung dalam folder src terletak di direktori root proyek. Struktur proyek ini ditunjukkan di bawah ini. Beberapa file dan folder dibuat secara otomatis, beberapa Anda perlu membuat sendiri.


Struktur proyek

Proyek yang sudah selesai, yang akan kita bahas di sini, dapat ditemukan di repositori ini .

Folder component akan berisi komponen proyek (dalam kasus kami, hanya ada satu komponen di sini). Di folder dist , di file main.js , kode yang dikompilasi akan ditemukan, dan index.html , seperti yang telah disebutkan, adalah file HTML utama aplikasi kita.

Penyiapan paket web


Webpack dapat dikonfigurasi dengan banyak cara. Secara khusus, pengaturan alat ini dapat berupa argumen baris perintah atau hadir dalam proyek sebagai file konfigurasi dengan nama webpack.config.js . Di dalamnya, Anda perlu menjelaskan dan mengekspor objek yang berisi pengaturan. Kami akan mulai menyiapkan file ini dengan deskripsi objek yang terlihat seperti ini (kami akan mempertimbangkannya dalam beberapa bagian, dan di bawah ini kami akan memberikan kode lengkapnya):

 { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, }

Properti entry menetapkan file utama dengan kode sumber proyek. Nilai dari properti mode menunjukkan tipe lingkungan untuk dikompilasi (dalam kasus kami, ini adalah lingkungan development ) dan di mana harus meletakkan file yang dikompilasi.

Pekerjaan proyek


Tempatkan kode berikut di file index.html proyek kami, yang terletak di folder dist :

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head>   <meta charset="utf-8">   <title>React From Scratch</title> </head> <body>   <div id="root">   </div> </body> <script type="text/javascript" src="main.js"> </script> </html>

Perhatikan tag script ada dalam file ini. Itu menunjuk ke file main.js , yang akan diperoleh selama kompilasi proyek. Kami akan menggunakan elemen <div> dengan pengenal root untuk menampilkan aplikasi Bereaksi.

Sekarang instal paket react dan react-dom:

 npm install react react-dom

Tambahkan kode berikut ke index.js :

 import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root"));

Ini adalah kode standar untuk file aplikasi Bereaksi tersebut. Di sini kita menghubungkan perpustakaan, menghubungkan file komponen dan menampilkan aplikasi dalam <div> dengan pengidentifikasi root .

Berikut adalah kode untuk file app.component.js :

 import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() {   return <div className={s.intro}>Hello World</div>; } } export default MyComponent;

Berikut adalah kode untuk file app.component.css :

 .intro { background-color: yellow; }

Konfigurasikan Babel


Babel adalah transporter dengan potensi besar. Secara khusus, ia dapat mengkonversi KURANG ke CSS, JSX ke JS, TypeScript ke JS. Kami hanya akan menggunakan dua konfigurasi dengan itu - bereaksi dan env (mereka juga disebut "preset"). Babel dapat dikonfigurasi dengan berbagai cara, khususnya, kita berbicara tentang alat baris perintah, file pengaturan khusus, dan file package.json standar. Kami puas dengan opsi terakhir. Tambahkan bagian berikut ke package.json :

 "babel": {   "presets": [     "@babel/env",     "@babel/react"   ] }

Berkat pengaturan ini, Babel akan tahu preset mana yang perlu ia gunakan. Sekarang konfigurasikan Webpack untuk menggunakan Babel.

Menyiapkan Webpack untuk bekerja dengan Babel


Di sini kita akan menggunakan perpustakaan babel-loader, yang memungkinkan Anda untuk menggunakan Babel dengan Webpack. Faktanya, intinya adalah bahwa Babel akan dapat mencegat dan memproses file sebelum diproses oleh Webpack.

File SJS


Berikut adalah aturan tentang bekerja dengan file JS (kode ini akan pergi ke file webpack.config.js ), mereka adalah salah satu properti dari objek pengaturan yang diekspor oleh file ini:

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },   ] }

Array aturan disimpan dalam properti aturan objek yang diwakili di sini, yang dengannya file yang ditentukan oleh ekspresi reguler yang dijelaskan dalam properti test harus diproses. Dalam hal ini, aturan akan diterapkan ke semua file dengan ekstensi .m dan .js , sementara kami tidak ingin node_modules urutan file dari folder node_modules dan bower_components . Selanjutnya, di sini kami mengindikasikan bahwa kami ingin menggunakan babel-loader. Setelah itu, file JS kami akan diproses oleh Babel terlebih dahulu dan kemudian dikemas menggunakan Webpack.

File SCSS


Tambahkan pengaturan untuk memproses file CSS ke array rules objek module :

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },  ] }

Kami akan menyelesaikan tugas memproses file CSS menggunakan style-loader dan css-loader. Properti use dapat menerima berbagai objek atau string. Loader dipanggil, mulai dari yang terakhir, jadi file kita akan diproses terlebih dahulu dengan css-loader. Kami mengkonfigurasi alat ini dengan menulis true dalam properti modules dari objek options . Berkat ini, gaya CSS hanya akan diterapkan pada komponen yang diimpor. Css-loader akan memungkinkan perintah impor dalam file CSS, setelah itu style-loader akan menambahkan apa yang muncul dalam bentuk tag style di bagian <head> halaman:

 <style> <--  css --> </style>

Resources Sumber daya statis


Kami akan terus bekerja pada objek pengaturan module , menjelaskan aturan untuk memproses sumber daya statis di dalamnya:

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] }

Jika sistem menemukan file dengan ekstensi PNG, SVG, JPG atau GIF, maka file-loader akan digunakan untuk memproses file seperti itu. Memproses file seperti itu penting untuk persiapan dan optimalisasi proyek yang tepat.

Menyiapkan server pengembangan


Sekarang, dalam file webpack.config.js , konfigurasikan server pengembangan:

 devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true },

Properti contentBase devServer pengaturan contentBase menunjuk ke folder tempat sumber daya kami dan file index.html berada. Properti port memungkinkan Anda menentukan port yang akan didengarkan server. Properti watchContentBase memungkinkan pemantauan perubahan pada file di folder yang ditentukan oleh properti contentBase .

Berikut adalah kode lengkap untuk file webpack.config.js :

 const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true }, module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] } };

Sekarang kita akan menambahkan ke package.json , di bagian scripts , perintah untuk memulai server pengembangan dan perintah untuk mulai membangun proyek:

 "scripts": {   "dev": "webpack-dev-server",   "start": "webpack" },

Sekarang semuanya siap untuk memulai server pengembangan dengan perintah berikut:

 npm run dev

Jika sekarang Anda pergi ke alamat http: // localhost: 9000 , Anda dapat melihat halaman proyek kami.


Halaman proyek di browser

Untuk membangun proyek, gunakan perintah berikut:

 npm run start

Setelah itu, Anda dapat membuka file index.html di browser dan melihat hal yang sama yang bisa Anda lihat dengan memulai server pengembangan dan pergi ke alamat http: // localhost: 9000 .

Ringkasan


Artikel ini menyediakan ikhtisar pengaturan Webpack dan Babel untuk digunakan dalam proyek Bereaksi. Faktanya, konfigurasi yang jauh lebih kompleks dapat dibuat di pangkalan yang telah kami pisahkan hari ini. Misalnya, alih-alih CSS, Anda dapat menggunakan KURANG, alih-alih JS biasa, tulis dalam TypeScript. Jika perlu, Anda dapat, misalnya, mengkonfigurasi minifikasi file dan banyak lagi. Tentu saja, jika hari ini kenalan pertama Anda dengan proses menyiapkan proyek React sendiri terjadi, mungkin bagi Anda bahwa semua ini sangat rumit dan jauh lebih mudah untuk menggunakan templat yang sudah jadi. Namun, setelah Anda mengetahuinya sedikit, Anda akan menyadari bahwa sedikit peningkatan dalam kompleksitas pengaturan memberi Anda lebih banyak kebebasan, memungkinkan Anda untuk menyesuaikan proyek Anda seperti yang Anda butuhkan, tanpa sepenuhnya bergantung pada beberapa solusi "standar" dan mengurangi ketergantungan Anda pada mereka.

Pembaca yang budiman! Pendekatan apa yang paling sering Anda gunakan ketika mempersiapkan lingkungan kerja Anda untuk proyek Bereaksi?

Source: https://habr.com/ru/post/id436886/

More articles:


All Articles