Μια εισαγωγή στο Webpack: τι είναι και πώς να το χρησιμοποιήσετε

Εισαγωγή

Εντάξει, έτσι υποθέτω ότι έχετε ακούσει για το webpack - γι 'αυτό είστε εδώ, έτσι; Το πραγματικό ερώτημα είναι τι ξέρεις γι 'αυτό; Μπορεί να γνωρίζετε μερικά πράγματα για αυτό, όπως το πώς λειτουργεί ή ίσως να μην έχετε καμία απολύτως ιδέα. Είτε έτσι είτε αλλιώς, μπορώ να σας διαβεβαιώσω ότι μετά από να διαβάσετε αυτό το άρθρο, πιθανότατα θα νιώσετε αρκετά άνετα με όλη την κατάσταση του webpack.

Μετά από όλα - η αναγκαιότητα είναι η μητέρα της εφεύρεσης ...

Ένας τέλειος τρόπος να πει κανείς γιατί υπάρχει το πακέτο webpack είναι το παραπάνω απόσπασμα. Αλλά για να το καταλάβουμε καλύτερα θα πρέπει να επιστρέψουμε πίσω, όταν η JavaScript δεν ήταν το νέο σέξι πράγμα, σε εκείνες τις παλιές χρονικές εποχές, όταν ένας ιστότοπος ήταν απλά ένα μικρό πακέτο παλιού .html, CSS και ίσως ένα λίγα αρχεία JavaScript σε ορισμένες περιπτώσεις. Αλλά πολύ σύντομα όλα αυτά θα αλλάξουν.

Ποιο ηταν το ΠΡΟΒΛΗΜΑ?

Ολόκληρη η κοινότητα dev συμμετείχε σε μια συνεχή προσπάθεια βελτίωσης της συνολικής εμπειρίας των χρηστών και των προγραμματιστών γύρω από τη χρήση και την κατασκευή εφαρμογών javascript / web. Ως εκ τούτου, είδαμε πολλές νέες βιβλιοθήκες και πλαίσια που εισήχθησαν.

Μερικά σχέδια σχεδίασης εξελίχθηκαν επίσης με την πάροδο του χρόνου για να δώσουν στους προγραμματιστές έναν καλύτερο, πιο ισχυρό αλλά πολύ απλό τρόπο γραφής σύνθετων εφαρμογών JavaScript. Οι ιστοχώροι πριν δεν ήταν πια ένα μικρό πακέτο με έναν περίεργο αριθμό αρχείων σε αυτά. Είπαν ότι έγιναν ογκώδη, με την εισαγωγή των ενοτήτων JavaScript, καθώς η εγγραφή εγκλωβισμένων μικρών τεμαχίων κώδικα ήταν η νέα τάση. Τελικά όλα αυτά οδηγούν σε μια κατάσταση όπου είχαμε 4x ή 5x αρχείων στο συνολικό πακέτο εφαρμογής.

Δεν ήταν μόνο το συνολικό μέγεθος της εφαρμογής μια πρόκληση, αλλά υπήρξε επίσης ένα τεράστιο κενό στο είδος του κώδικα που οι προγραμματιστές γράφουν και το είδος των browsers κώδικα θα μπορούσε να καταλάβει. Οι προγραμματιστές χρειάστηκε να χρησιμοποιήσουν πολύ βοηθητικό κώδικα που ονομάζεται polyfills για να βεβαιωθείτε ότι τα προγράμματα περιήγησης ήταν σε θέση να ερμηνεύσουν τον κώδικα στα πακέτα τους.

Για να απαντήσουμε σε αυτά τα ζητήματα, δημιουργήθηκε webpack. Το Webpack είναι ένα static bundler module.

Πώς ήταν λοιπόν η Webpack η απάντηση;

Εν συντομία, το Webpack περνάει από το πακέτο σας και δημιουργεί αυτό που ονομάζει γράφημα εξάρτησης, το οποίο αποτελείται από διάφορες ενότητες τις οποίες θα απαιτούσε να λειτουργεί το webapp όπως αναμενόταν. Στη συνέχεια, ανάλογα με αυτό το γράφημα, δημιουργεί ένα νέο πακέτο που αποτελείται από τον ελάχιστο ελάχιστο αριθμό αρχείων που απαιτούνται, συχνά μόνο ένα αρχείο bundle.js το οποίο μπορεί να συνδεθεί εύκολα στο αρχείο html και να χρησιμοποιηθεί για την εφαρμογή.

Στο επόμενο μέρος αυτού του άρθρου θα σας μεταφέρω μέσω της βήμα προς βήμα εγκατάστασης του webpack. Μέχρι το τέλος αυτής, ελπίζω να καταλάβετε τα βασικά του Webpack. Έτσι αφήνει να πάρει αυτό το τροχαίο ...

Τι κτίζουμε;

Ίσως έχετε ακούσει για το ReactJS. Αν γνωρίζετε το reactJS, πιθανόν να ξέρετε τι είναι η εφαρμογή δημιουργίας-αντίδρασης. Για όσους από εσάς δεν έχουν ιδέα για το ποια από τα δύο αυτά πράγματα είναι, το ReactJS είναι μια βιβλιοθήκη UI που είναι πολύ χρήσιμη για την κατασκευή ευφυών σύνθετων UI και η δημιουργία-react-app είναι ένα εργαλείο CLI για τη ρύθμιση ή την εκκίνηση μιας εγκατάστασης boilerplate dev για να κάνετε εφαρμογές React.

Σήμερα θα δημιουργήσουμε μια απλή εφαρμογή React χωρίς όμως να χρησιμοποιήσουμε το CLI δημιουργίας-αντιδράσεως-εφαρμογής. Ελπίζω ότι αυτό ακούγεται αρκετά διασκεδαστικό για εσάς. :)

Φάση εγκατάστασης

npm int

Αυτό είναι σωστό, αυτό είναι το πώς όλα τα καλά πράγματα ξεκινούν: απλά παλιά npm init. Θα χρησιμοποιήσω τον κώδικα VS, αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας κώδικα που θέλετε να ξεκινήσετε.

Προτού να μπορέσετε να κάνετε κάτι από αυτό, σκεφτείτε, βεβαιωθείτε ότι διαθέτετε την τελευταία έκδοση του nodeJS και την έκδοση npm εγκατεστημένη τοπικά στο μηχάνημά σας. Κάντε κλικ σε κάθε έναν από αυτούς τους συνδέσμους για να μάθετε περισσότερα σχετικά με τη διαδικασία.

$ npm init

Αυτό θα δημιουργήσει ένα πακέτο εκκίνησης και θα προσθέσει ένα αρχείο package.json για εμάς. Στο σημείο αυτό θα αναφερθούν όλες οι εξαρτήσεις που απαιτούνται για τη δημιουργία αυτής της εφαρμογής.

Τώρα για τη δημιουργία μιας απλής εφαρμογής React, χρειαζόμαστε δύο κύριες βιβλιοθήκες: React και ReactDOM. Ας τους προσθέσουμε ως εξαρτήσεις στην εφαρμογή μας χρησιμοποιώντας npm.

$ npm αντιδρώ αντίδραση-dom -save

Έπειτα πρέπει να προσθέσουμε webpack, ώστε να μπορέσουμε να συνδέσουμε μαζί την εφαρμογή μας. Όχι μόνο τη δέσμη, αλλά θα χρειαστεί επίσης καυτή επαναφόρτωση, η οποία είναι δυνατή με τη χρήση του διακομιστή dev webpack.

$ npm i webpack webpack-dev-server webpack-cli -save-dev

Το --save - dev είναι να καθορίσετε ότι αυτές οι μονάδες είναι απλώς εξάρτημα εξόδου. Τώρα που εργαζόμαστε με το React, πρέπει να έχουμε κατά νου ότι το React χρησιμοποιεί τις κλάσεις ES6 και τις δηλώσεις εισαγωγής, κάτι που ίσως να μην κατανοούν όλοι οι φυλλομετρητές. Για να βεβαιωθείτε ότι ο κώδικας είναι αναγνώσιμος από όλα τα προγράμματα περιήγησης, χρειαζόμαστε ένα εργαλείο όπως το babel για να μεταφέρουμε τον κώδικα στον κανονικό αναγνώσιμο κώδικα για προγράμματα περιήγησης.

$ npm i babel-core babel-φορτωτής @ babel / preset-react @ babel / preset-env html-webpack-plugin -save-dev

Λοιπόν τι μπορώ να πω, αυτός ήταν ο μέγιστος αριθμός εγκαταστάσεων που υπόσχομαι. Στην περίπτωση της babel, φορτώσαμε πρώτα τη βιβλιοθήκη πυρήνα babel, στη συνέχεια τον φορτωτή και, τέλος, 2 plugins ή presets για να δουλέψουμε ειδικά με το React και όλους τους νέους κώδικες ES2015 και ES6 προς τα εμπρός.

Προχωρώντας, ας προσθέσουμε κάποιο κωδικό και ας ξεκινήσουμε τη διαμόρφωση του webpack.

Αυτός είναι ο τρόπος με τον οποίο το αρχείο package.json πρέπει να φροντίζει όλες τις εγκαταστάσεις μέχρι στιγμής. Ίσως να έχετε διαφορετικό αριθμό έκδοσης ανάλογα με το πότε ακολουθείτε αυτό το άρθρο.

Ο κώδικας

Ας αρχίσουμε προσθέτοντας ένα αρχείο webpack.config.js στη ρίζα της δομής της εφαρμογής μας. Προσθέστε τον ακόλουθο κώδικα στο αρχείο webpack.config.

const path = require ('path').
const HtmlWebpackPlugin = απαιτείται ('html-webpack-plugin');
module.exports = {
  // Αυτή η ιδιότητα καθορίζει από πού ξεκινά η εφαρμογή
  είσοδος: './ src / index.js',
  // Αυτή η ιδιότητα ορίζει τη διαδρομή του αρχείου και το όνομα του αρχείου που θα χρησιμοποιηθεί για την ανάπτυξη του πακέτου
  παραγωγή:{
    διαδρομή: path.join (__ dirname, '/ dist'),
    όνομα αρχείου: 'bundle.js'
  },
  // Ρυθμίσεις φορτωτών
  ενότητα: {
    κανόνες: [
      {
        δοκιμή: /\.js$/,
        εξαιρέσει: / node_modules /,
        χρήση: {
          φορτωτής: 'babel-loader'
        }}
      }}
    ]
  },
// Εγκατάσταση plugin για να χρησιμοποιήσετε ένα αρχείο HTML για την προβολή των αρχείων js
 plugins: [
    νέο HtmlWebpackPlugin ({
      πρότυπο: './src/index.html'
    })
  ]
}}

Εντάξει λοιπόν, ας καταλάβουμε τις παραπάνω γραμμές.

Αρχικά, ξεκινάμε απαιτώντας την προεπιλεγμένη ενότητα διαδρομής για να αποκτήσετε πρόσβαση στη θέση του αρχείου και να κάνετε αλλαγές στη θέση του αρχείου.

Στη συνέχεια, απαιτούμε το HTMLWebpackPlugin να δημιουργήσει ένα αρχείο HTML που θα χρησιμοποιηθεί για την προβολή αρχείων / αρχείων JavaScript. Διαβάστε περισσότερα για το HTMLWebpackPlugin κάνοντας κλικ στο σύνδεσμο.

Έπειτα έχουμε το αντικείμενο export.module με κάποιες ιδιότητες σε αυτά. Το πρώτο είναι η ιδιότητα καταχώρησης, η οποία χρησιμοποιείται για να καθορίσει ποια webpack θα πρέπει να ξεκινήσει για να δημιουργηθεί το γράφημα εσωτερικής εξάρτησης.

module.exports = {
  είσοδος: './ src / index.js'
}}

Η επόμενη είναι η ιδιότητα εξόδου που καθορίζει την προέλευση του παρατιθέμενου αρχείου και ποιο θα είναι το όνομα του δεσμευμένου αρχείου. Αυτό γίνεται από τις ιδιότητες output.path και output.filename.

module.exports = {
// Αυτή η ιδιότητα ορίζει τη διαδρομή του αρχείου και το όνομα του αρχείου που θα χρησιμοποιηθεί για την ανάπτυξη του πακέτου
  παραγωγή:{
    διαδρομή: path.join (__ dirname, '/ dist'),
    όνομα αρχείου: 'bundle.js'
  },
}}

Ακολουθούν οι φορτωτές. Αυτό είναι να καθορίσετε τι θα πρέπει να κάνει το webpack για έναν συγκεκριμένο τύπο αρχείου. Θυμηθείτε ότι το webpack εκτός πλαισίου αντιλαμβάνεται μόνο το JavaScript και το JSON, αλλά εάν το έργο σας έχει οποιαδήποτε άλλη γλώσσα που χρησιμοποιείται, αυτό θα ήταν το μέρος για να καθορίσετε τι να κάνετε με αυτή τη νέα γλώσσα.

module.exports = {
// Ρυθμίσεις φορτωτών
  ενότητα: {
    κανόνες: [
      {
        δοκιμή: /\.js$/,
        εξαιρέσει: / node_modules /,
        χρήση: {
          φορτωτής: 'babel-loader'
        }}
      }}
    ]
  }}
}}

Οι πληροφορίες θα πρέπει να καθορίζονται σε ένα αντικείμενο για κάθε ιδιότητα της μονάδας, η οποία έχει επιπλέον μια σειρά από κανόνες. Θα υπάρχει ένα αντικείμενο για κάθε περίπτωση. Έχω επίσης εξειδικεύσει να εξαιρέσω τα πάντα στον φάκελο node_modules μου.

Επόμενη επάνω είναι η ιδιότητα plugin. Αυτό χρησιμοποιείται για την επέκταση των δυνατοτήτων του webpack. Προτού να μπορέσει να χρησιμοποιηθεί μια πρόσθετη διάταξη στη συστοιχία προσθηκών μέσα στο αντικείμενο των εξαγωγών μονάδας, πρέπει να απαιτήσουμε το ίδιο.

module.exports = {
// Εγκατάσταση plugin για να χρησιμοποιήσετε ένα αρχείο HTML για την προβολή των αρχείων js
 plugins: [
    νέο HtmlWebpackPlugin ({
      πρότυπο: './src/index.html'
    })
  ]
}}

Αυτό το συγκεκριμένο πρόσθετο, όπως εξηγήθηκε παραπάνω, θα χρησιμοποιήσει το καθορισμένο αρχείο στο φάκελο src. Στη συνέχεια, θα το χρησιμοποιήσει ως πρότυπο για το αρχείο HTML, στο οποίο θα εισάγονται αυτόματα όλα τα πακέτα αρχείων. Υπάρχουν πολλά άλλα από το κουτί plugins που θα μπορούσαμε να χρησιμοποιήσουμε - checkout την επίσημη σελίδα για περισσότερες πληροφορίες.

Το τελευταίο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε ένα αρχείο .babelrc για να χρησιμοποιήσουμε την προκαθορισμένη ρύθμιση babel που έχουμε εγκαταστήσει και να φροντίσουμε για τις κλάσεις ES6 και τις δηλώσεις εισαγωγής στον κώδικα μας. Προσθέστε τις ακόλουθες γραμμές κώδικα στο αρχείο .babelrc.

{
  "προεπιλογές": ["env", "react"]
}}

Και ακριβώς έτσι, τώρα η babel θα μπορέσει να χρησιμοποιήσει αυτές τις προεπιλογές. Εντάξει αρκετά από την εγκατάσταση - ας προσθέσουμε κάποιο κώδικα React για να δούμε πώς λειτουργεί αυτό.

Αντιδράστε τον κώδικα

Δεδομένου ότι το σημείο εκκίνησης για την εφαρμογή είναι το αρχείο index.js στο φάκελο src, ας αρχίσουμε με αυτό. Θα ξεκινήσουμε με την απαίτηση τόσο του React όσο και του ReactDOM για τη χρήση μας σε αυτήν την περίπτωση. Προσθέστε τον παρακάτω κώδικα στο αρχείο index.js.

εισαγωγή Αντιδρά από "αντιδρά";
εισαγωγή του ReactDOM από το 'react-dom';
εισαγωγή εφαρμογής από './Components/App';
ReactDOM.render (, document.getElementById ('app'));

Επομένως, εισάγουμε απλά ένα άλλο αρχείο από το φάκελο των συστατικών μας, το οποίο θα δημιουργήσετε και προσθέστε ένα άλλο αρχείο στο φάκελο που ονομάζεται App.js. Ας δούμε λοιπόν τι υπάρχει μέσα στο αρχείο App.js:

εισαγάγετε React, {Component} από το 'react'
Η εφαρμογή κλάσης επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      
        

Webpack + Αντιμετώπιση ρυθμίσεων            )   }} }}

εξαγωγή προεπιλεγμένης εφαρμογής?

Είμαστε σχεδόν τελειωμένοι. Το μόνο που μένει τώρα είναι να ενεργοποιήσετε την επαναφόρτωση. Αυτό σημαίνει ότι κάθε φορά που ανιχνεύεται μια αλλαγή, το πρόγραμμα περιήγησης αυτόματα φορτώνει ξανά τη σελίδα και έχει τη δυνατότητα να δημιουργήσει και να συνδέσει ολόκληρη την εφαρμογή όταν έρθει η ώρα.

Μπορούμε να το κάνουμε αυτό προσθέτοντας τιμές δέσμης ενεργειών στο αρχείο package.json. Καταργήστε την ιδιότητα δοκιμής στο αντικείμενο scripts του πακέτου package.json και προσθέστε αυτά τα δύο scripts:

"εκκίνηση": "webpack-dev-server - ανάπτυξη κέντρου - άνοιγμα" - "
"build": "παραγωγή webpack - mode"

Είστε πανέτοιμοι! Μεταβείτε στο τερματικό σας, μεταβείτε στο ριζικό φάκελο και εκτελέστε npm start. Θα πρέπει να ξεκινήσει έναν εξυπηρετητή dev στον υπολογιστή σας και να προβάλει το αρχείο HTML στο πρόγραμμα περιήγησης. Αν κάνετε μικρές / μείζονες αλλαγές και αποθηκεύσετε τον κώδικα, το πρόγραμμα περιήγησης θα ανανεωθεί αυτόματα για να εμφανιστεί το τελευταίο σύνολο αλλαγών.

Μόλις νομίζετε ότι είστε έτοιμοι να λάβετε το πακέτο εφαρμογών, απλά χρειαστεί να χτυπήσετε την εντολή, το npm build και το webpack θα δημιουργήσει μια βελτιστοποιημένη δέσμη στο φάκελο του project που μπορεί να αναπτυχθεί σε οποιοδήποτε διακομιστή web.

συμπέρασμα

Πρόκειται για μια μικρή εφαρμογή ή περίπτωση χρήσης webpack και babel, αλλά οι εφαρμογές είναι απεριόριστες. Ελπίζω να είστε αρκετά ενθουσιασμένοι για να εξερευνήσετε περισσότερες επιλογές και τρόπους για να κάνετε τα πράγματα με το webpack και την babel. Ανατρέξτε στις επίσημες ιστοσελίδες τους για να μάθετε περισσότερα και να διαβάσετε σε βάθος.

Δημιούργησα ένα Github repo με όλο τον κώδικα σε αυτό, γι 'αυτό παρακαλούμε να το ανατρέξετε σε τυχόν ερωτήσεις.

Τα δύο μου λεπτά για το webpack; Λοιπόν, μερικές φορές μπορεί να νομίζετε ότι δεν είναι τίποτα περισσότερο από ένα εργαλείο, και γιατί πρέπει να ασχοληθείτε πάρα πολύ για ένα εργαλείο; Αλλά εμπιστευτείτε όταν λέω αυτό: ο αρχικός αγώνας, ενώ μαθαίνετε το δρόμο σας γύρω από το webpack, θα σας εξοικονομήσει έναν τεράστιο αριθμό ωρών που διαφορετικά θα επενδύσατε στην ανάπτυξη χωρίς το webpack.

Αυτό είναι όλο για τώρα, ελπίζουμε να επιστρέψουμε με ένα ακόμα ενδιαφέρον άρθρο σύντομα. Ελπίζω να απολαύσατε την ανάγνωση αυτού του!

Σε περίπτωση που αντιμετωπίσετε οποιαδήποτε δυσκολία ή προβλήματα κατά την παρακολούθηση οποιουδήποτε από τα παραπάνω βήματα / διαδικασίες, παρακαλώ αισθανθείτε ελεύθερος να έρθετε σε επαφή και να αφήσετε σχόλια.

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: https://twitter.com/ashishnandansin