Comment emballer en utilisant Parcel-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment emballer en utilisant Parcel

亚连

Jun 11, 2018 pm 05:26 PM

react 打包

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

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

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7476

Tutoriel CakePHP

1377

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment créer une application de chat en temps réel avec React et WebSocket Sep 26, 2023 pm 07:46 PM

Comment créer une application de chat en temps réel à l'aide de React et WebSocket Introduction : Avec le développement rapide d'Internet, la communication en temps réel a attiré de plus en plus d'attention. Les applications de chat en direct font désormais partie intégrante de la vie sociale et professionnelle moderne. Cet article expliquera comment créer une application simple de chat en temps réel à l'aide de React et WebSocket, et fournira des exemples de code spécifiques. 1. Préparation technique Avant de commencer à créer une application de chat en temps réel, nous devons préparer les technologies et outils suivants : React : un pour la construction

Guide pour la séparation du front-end et du back-end de React : Comment réaliser le découplage et le déploiement indépendant du front-end et du back-end Sep 28, 2023 am 10:48 AM

Guide de séparation front-end et back-end de React : Comment réaliser un découplage front-end et back-end et un déploiement indépendant, des exemples de code spécifiques sont nécessaires Dans l'environnement de développement Web actuel, la séparation front-end et back-end est devenue une tendance. En séparant le code front-end et back-end, le travail de développement peut être rendu plus flexible, plus efficace et faciliter la collaboration en équipe. Cet article expliquera comment utiliser React pour réaliser une séparation front-end et back-end, atteignant ainsi les objectifs de découplage et de déploiement indépendant. Tout d’abord, nous devons comprendre ce qu’est la séparation front-end et back-end. Dans le modèle de développement Web traditionnel, le front-end et le back-end sont couplés

Comment créer des applications Web simples et faciles à utiliser avec React et Flask Sep 27, 2023 am 11:09 AM

Comment utiliser React et Flask pour créer des applications Web simples et faciles à utiliser Introduction : Avec le développement d'Internet, les besoins des applications Web deviennent de plus en plus diversifiés et complexes. Afin de répondre aux exigences des utilisateurs en matière de facilité d'utilisation et de performances, il devient de plus en plus important d'utiliser des piles technologiques modernes pour créer des applications réseau. React et Flask sont deux frameworks très populaires pour le développement front-end et back-end, et ils fonctionnent bien ensemble pour créer des applications Web simples et faciles à utiliser. Cet article détaillera comment exploiter React et Flask

Partagez un moyen simple de packager des projets PyCharm Dec 30, 2023 am 09:34 AM

Partagez la méthode d'empaquetage de projet PyCharm simple et facile à comprendre. Avec la popularité de Python, de plus en plus de développeurs utilisent PyCharm comme outil principal pour le développement Python. PyCharm est un puissant environnement de développement intégré qui fournit de nombreuses fonctions pratiques pour nous aider à améliorer l'efficacité du développement. L’une des fonctions importantes est le packaging du projet. Cet article explique comment empaqueter des projets dans PyCharm d'une manière simple et facile à comprendre, et fournit des exemples de code spécifiques. Pourquoi packager des projets ? Développé en Python

Comment créer une application de messagerie fiable avec React et RabbitMQ Sep 28, 2023 pm 08:24 PM

Comment créer une application de messagerie fiable avec React et RabbitMQ Introduction : Les applications modernes doivent prendre en charge une messagerie fiable pour obtenir des fonctionnalités telles que les mises à jour en temps réel et la synchronisation des données. React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur, tandis que RabbitMQ est un middleware de messagerie fiable. Cet article explique comment combiner React et RabbitMQ pour créer une application de messagerie fiable et fournit des exemples de code spécifiques. Présentation de RabbitMQ :

Guide de l'utilisateur de React Router : Comment implémenter le contrôle de routage frontal Sep 29, 2023 pm 05:45 PM

Guide de l'utilisateur de ReactRouter : Comment implémenter le contrôle du routage frontal Avec la popularité des applications monopage, le routage frontal est devenu un élément important qui ne peut être ignoré. En tant que bibliothèque de routage la plus populaire de l'écosystème React, ReactRouter fournit des fonctions riches et des API faciles à utiliser, rendant la mise en œuvre du routage frontal très simple et flexible. Cet article expliquera comment utiliser ReactRouter et fournira quelques exemples de code spécifiques. Pour installer ReactRouter en premier, nous avons besoin

Comment créer une application d'analyse de données rapide à l'aide de React et Google BigQuery Sep 26, 2023 pm 06:12 PM

Comment utiliser React et Google BigQuery pour créer des applications d'analyse de données rapides Introduction : À l'ère actuelle d'explosion de l'information, l'analyse des données est devenue un maillon indispensable dans diverses industries. Parmi eux, créer des applications d’analyse de données rapides et efficaces est devenu l’objectif poursuivi par de nombreuses entreprises et particuliers. Cet article explique comment utiliser React et Google BigQuery pour créer une application d'analyse rapide des données et fournit des exemples de code détaillés. 1. Présentation React est un outil pour créer

PHP, Vue et React : Comment choisir le framework front-end le plus adapté ? Mar 15, 2024 pm 05:48 PM

PHP, Vue et React : Comment choisir le framework front-end le plus adapté ? Avec le développement continu de la technologie Internet, les frameworks front-end jouent un rôle essentiel dans le développement Web. PHP, Vue et React sont trois frameworks front-end représentatifs, chacun avec ses propres caractéristiques et avantages. Lorsqu'ils choisissent le framework front-end à utiliser, les développeurs doivent prendre une décision éclairée en fonction des besoins du projet, des compétences de l'équipe et des préférences personnelles. Cet article comparera les caractéristiques et les usages des trois frameworks front-end PHP, Vue et React.

See all articles