recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'exemple d'emballage de colis

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

小云云
小云云original
2018-01-16 13:20:222448parcourir

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

1. Initialisez npm


yarn init -y
ou 


npm init -y
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"
}
2 . Ajouter React


fil :


npm :
yarn add react react-dom


Contenu du fichier package.json : 
npm install react react-dom --save


 {
  "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"
+ }
 }
Ajouter Babel


Nouveau fichier babelrc


Contenu d'entrée : 
touch .babelrc


Ajouter un préréglage babel -réagir : 
{
 "presets": ["react"]
}

fils :


npm :
yarn add babel-preset-react -D


À cette fois, le fichier package.json Contenu : 
npm install babel-preset-react --D


 {
  "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"
+  }
 }
5. Ajouter un colis


fil :


npm :

yarn add parcel-bundler -D


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

npm install parcel-bundler --D


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"  
  }
 }

Contenu


7 . Créez un nouveau fichier index.js 
<html>
<body>
  <p id="root"></p>
  <script src="./index.js"></script>
</body>
</html>



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"));



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"  
  }
 }

Exécutez


ou 

yarn start


Ouvrez http://localhost:1234 dans le navigateur

npm start
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

.cache
dist
node_modules

Recommandations associées :

Vue de configuration zéro du colis de l'outil d'emballage échafaudage de développement

Parcel.js et Vue 2.x, exemple d'expérience d'empaquetage extrêmement rapide sans configuration

Explication détaillée de nodejs pour implémenter simple gulp emballage

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse approfondie de l'utilisation de la liste déroulante de recherche Imitation Taobao JSsearchArticle suivant：Analyse approfondie de l'utilisation de la liste déroulante de recherche Imitation Taobao JSsearch

Articles Liés

Voir plus