Utilisation de colis comme bundler pour les applications de réaction

WebPack n'est pas le seul jeu en ville pour la gestion des actifs. Parcel offre une alternative convaincante, fournissant un regroupement d'actifs rationalisé avec une configuration zéro. Contrairement aux autres bundlers qui exigent un code d'installation étendu, la simplicité de Parcel est un avantage majeur. Sa vitesse est également remarquable, en tirant parti du traitement multiconore pour des temps de construction nettement plus rapides par rapport aux bundlers plus complexes.

Les caractéristiques clés et les avantages du colis comprennent:

• Fractionnement de code efficace via des importations dynamiques.
• Gestion des actifs polyvalents pour divers types de fichiers, y compris HTML, CSS et JavaScript.
• Remplacement du module chaud (HMR) pour un développement rapide sans rafraîchissement de page constante.
• Effacer l'erreur en surbrillance dans la console pour un débogage plus facile.
• Prise en charge des variables environnementales pour gérer les paramètres de développement et de production.
• Mode de production optimisé pour les constructions plus rapides en éliminant les étapes inutiles.

Cet article montre comment construire un projet React à l'aide de la parcelle, présentant une alternative pour créer une application React. Explorons une approche différente pour réagir le développement.

Configuration du projet

1. Créer un répertoire de projet:

 mkdir csstricks-react-parcel && cd $ _

2. Initialiser package.json : utilisez NPM ou le fil:

 # npm
npm init -y

# Fil (utilisé dans ce tutoriel)
fil init -y

3. Installez les dépendances: installez la colis et Babel localement:

 yarn Ajouter du paquet-bundler babel-preset-env babel-preset-react --dev
fil Ajouter React React-Dom

4. Configurer Babel: Créez un fichier .babelrc avec le contenu suivant:

 {
  "Presets": ["Env", "React"]
}

5. Créer index.js (composant de l'application):

 importer réagir à partir de «réagir»;
Importer Reactdom de «React-Dom»;

L'application de classe étend React.
  rendre() {
    retour (
      <react.fragment><h2 id="Bonjour">Bonjour!</h2></react.fragment>
    ));
  }
}

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

6. Créer index.html (dans le répertoire 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>Exemple de réaction de colis</title>


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

7. Configurer package.json (script de démarrage):

 "scripts": {
  "start": "node_env = colis de développement src / index.html --open"
}

8. Exécutez l'application: Exécutez yarn start dans votre terminal. L'application doit être lancée dans votre navigateur sur http://localhost:1234/ .

Style avec Sass

Le colis comprend PostCSS. Pour utiliser SASS, installez les packages nécessaires:

 Yarn Add - Dev Node-Sass Autoprefixer

Configurer la section postcss de package.json (si nécessaire):

 "postcss": {
  "modules": faux,
  "Plugins": {
    "Autoprefixer": {
      "Browsers": ["> 1%", "Last 4 Versions", "Firefox ESR", "pas IE <h3 id="Construction-de-production"> Construction de production</h3><p> Configurez votre <code>package.json</code> pour les builds de production:</p><pre class="brush:php;toolbar:false"> "scripts": {
  "start": "node_env = colis de développement src / index.html --open",
  "build": "node_env = parcelle de production build Dist / index.html ---public-url ./"
}

Exécutez yarn build pour créer une construction prête pour la production dans le dossier dist . Des options comme --out-dir , --no-minify et --no-cache offrent une personnalisation supplémentaire.

CRAP (Créer React App Parcel)

Créer React App Parcel (CRAP) simplifie la configuration du projet:

 npx create-react-app-parcel my-app
CD My-App
Start du fil

Conclusion

La facilité d'utilisation de la parcelle et les temps de construction optimisés en font un concurrent solide pour votre prochain projet React. Sa popularité croissante (30 000 stars de Github) parle de l'acceptation de sa communauté.

Ressources

• Exemples de colis
• Colis génial

Référentiel GitHub pour le code source de ce didacticiel (lien à fournir).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!