Explication détaillée de l'exemple d'emballage de colis-js tutoriel-php.cn

Explication détaillée de l'exemple d'emballage de colis

小云云

Libérer： 2018-01-16 13:20:22

original

2436 Les gens l'ont consulté

Cet article présente principalement l'exemple d'emballage Parcel (React HelloWorld), et présente en détail les caractéristiques et les exemples d'utilisation de l'emballage Parcel. Si vous êtes intéressé, vous pourrez en apprendre davantage.

Fonctionnalités d'emballage des colis

Temps d'emballage extrêmement rapide

Parcel utilise des processus de travail pour permettre une compilation multicœur. Il existe également un cache du système de fichiers pour permettre une recompilation rapide même après le redémarrage de la build.

Regroupez tous vos actifs

Parcel prend en charge immédiatement JS, CSS, HTML, les fichiers et plus encore, et aucun plugin n'est requis.

Conversion automatique

Si nécessaire, Babel, PostCSS et PostHTML et même le package node_modules seront utilisés pour convertir automatiquement le code.

Configurer le fractionnement du code

En utilisant la syntaxe Dynamic Import(), Parcel divise vos bundles de fichiers de sortie (bundles), vous n'avez donc qu'à charger le code dont vous avez besoin lors du chargement initial.

Remplacement du module à chaud

Parcel ne nécessite pas de configuration Dans l'environnement de développement, le module sera automatiquement mis à jour dans le navigateur au fur et à mesure que votre code change.

Journal des erreurs convivial

Lorsqu'une erreur est rencontrée, Parcel affichera des extraits de code avec mise en évidence de la syntaxe pour vous aider à localiser le problème.

Application React HelloWorld fournie avec Parcel. Adresse GitHub : https://github.com/justjavac/parcel-example/tree/master/react-helloworld

0. Créez un nouveau répertoire

mkdir react-helloworld
cd react-helloworld

Copier après la connexion

1. Initialisez npm

yarn init -y

Copier après la connexion

npm init -y

Copier après la connexion

Le fichier package.json sera créé à ce moment-là. Le contenu du fichier est :

<🎜. >

{
 "name": "parcel-example-react-helloworld",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

Copier après la connexion

2 . Ajouter React

fil :

npm :

yarn add react react-dom

Copier après la connexion

Contenu du fichier package.json :

npm install react react-dom --save

Copier après la connexion

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+  "react": "^16.2.0",
+  "react-dom": "^16.2.0"
+ }
 }

Copier après la connexion

Ajouter Babel

Nouveau fichier babelrc

Contenu d'entrée :

touch .babelrc

Copier après la connexion

Ajouter un préréglage babel -réagir :

{
 "presets": ["react"]
}

Copier après la connexion

fils :

npm :

yarn add babel-preset-react -D

Copier après la connexion

À cette fois, le fichier package.json Contenu :

npm install babel-preset-react --D

Copier après la connexion

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
-  }
+  },
+  "devDependencies": {
+   "babel-preset-react": "^6.24.1"
+  }
 }

Copier après la connexion

5. Ajouter un colis

fil : <🎜. >

npm :

yarn add parcel-bundler -D

Copier après la connexion

À ce stade, le contenu du fichier package.json :

npm install parcel-bundler --D

Copier après la connexion

6. Créez un nouveau fichier index.html

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
  },
  "devDependencies": {
-   "babel-preset-react": "^6.24.1"
+   "babel-preset-react": "^6.24.1",
+   "parcel-bundler": "^1.0.3"  
  }
 }

Copier après la connexion

Contenu

7 . Créez un nouveau fichier index.js

<html>
<body>
  <p id="root"></p>
  <script src="./index.js"></script>
</body>
</html>

Copier après la connexion

8. Ajouter un emballage commande

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
 return <h1>Hello World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

Copier après la connexion

9. Terminez

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1"
+  "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1"
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.0.3"  
  }
 }

Copier après la connexion

Exécutez

yarn start

Copier après la connexion

Ouvrez http://localhost:1234 dans le navigateur

npm start

Copier après la connexion

L'emballage Le processus produira deux répertoires, .cache et dist, si pour les projets git, vous pouvez créer un nouveau fichier .gitignore pour ignorer ces deux répertoires :

Adresse GitHub : https://github.com/justjavac/parcel-example/tree /master/react-helloworld