Maison > interface Web > js tutoriel > Comment emballer en utilisant Parcel

Comment emballer en utilisant Parcel

亚连
Libérer: 2018-06-11 17:26:44
original
1969 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. Ceux qui sont intéressés peuvent en savoir plus sur les

Fonctionnalités d'emballage Parcel

Temps d'emballage extrêmement rapide

Parcel utilise des processus de travail pour permettre la 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.

Packagez toutes vos ressources

Parcel prend en charge directement 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 Lorsque vous êtes dans l'environnement de développement, il mettra automatiquement à jour le module dans le navigateur à 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

ou
yarn init -y
Copier après la connexion

À ce moment, le fichier package.json sera créé. >
npm init -y
Copier après la connexion

2. Ajouter React
{
 "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

yarn :

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

3. Ajouter Babel
 {
  "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

Nouveau fichier .babelrc

Contenu d'entrée :

touch .babelrc
Copier après la connexion

Ajouter babel-preset-react :

{
 "presets": ["react"]
}
Copier après la connexion
yarn :

npm:

yarn add babel-preset-react -D
Copier après la connexion

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

npm install babel-preset-react --D
Copier après la connexion

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

fil :

npm :

yarn add parcel-bundler -D
Copier après la connexion

À ce moment, le colis. Contenu du fichier 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. 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 une commande d'emballage
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

Terminé
 {
  "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

ou

yarn start
Copier après la connexion

Ouvrez http://localhost:1234 dans le navigateur

npm start
Copier après la connexion
Le processus d'empaquetage produira deux répertoires, .cache et dist. S'il s'agit d'un projet git, vous pouvez créer un nouveau fichier .gitignore et ignorer ces deux répertoires :

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. à l'avenir.

.cache
dist
node_modules
Copier après la connexion
Articles connexes :

Comment implémenter la fonction de recadrage et de téléchargement d'images de vue via js dans cropper

Il existe des mutations et des actions dans Vuex Quelle est la différence ? (Tutoriel détaillé)

Comment implémenter le recadrage des images et le téléchargement des fonctions du serveur dans vue

Comment résoudre la compatibilité réelle de la date et de l'heure easyui box ie Question (tutoriel détaillé)

Expliquez en détail les compétences pratiques dans Immutable et React

Comment utiliser readline dans Node.js pour réaliser la lecture et l'écriture ligne par ligne du contenu du fichier

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal