简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Réponses détaillées à la construction de l'environnement Webpack+Babel+React (tutoriel détaillé)

Réponses détaillées à la construction de l'environnement Webpack+Babel+React (tutoriel détaillé)

亚连
亚连original
2018-06-12 17:59:201683parcourir

Cet article présente principalement les étapes détaillées pour créer l'environnement de développement Webpack+Babel+React. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

1. 🎜> Avant de créer une application, comprenons d'abord que Webpack est un outil d'empaquetage de modules qui peut compiler divers fichiers (tels que ReactJS, Babel, Coffeescript, Less/Sass, etc.) sous forme de modules, puis les empaqueter.

2. Installer Webpack

Pour commencer à utiliser Webpack pour le développement dans le projet, nous devons d'abord l'installer dans l'environnement global. 

npm install webpack -g
3. Créez un projet

Après l'installation, créez un projet nommé learn-webpack et entrez dans le dossier du projet. Bien sûr, vous pouvez nommer le projet. Donnez-lui le nom que vous voulez.

Trouvez le dossier du projet que vous venez de créer via l'éditeur 
mkdir learn-webpack && cd learn-webpack

Créons maintenant 2 fichiers :

app.js

index.html
document.querySelector('#app').innerHTML = 'Hello World!';

Puis exécutez 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

webpack ./app.js ./dist/bundle.js

dans le terminal

Enfin, exécutez pour démarrer le service http local

python -m SimpleHTTPServer

A ce moment, vous pouvez saisir : http://localhost dans le navigateur :8000

Si vous pouvez voir Hello world! dans le navigateur, cela signifie que vous avez utilisé avec succès Webpack pour empaqueter et compiler main.js dans bundle.js. ?

Définir un fichier de configuration

Ce qui précède n'est qu'une brève introduction à l'utilisation de Webpack. En fait, chaque projet doit contenir un webpack.config, utilisé. pour indiquer à Webpack ce qui doit être fait.

Maintenant, exécutez dans le terminal : webpack
module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

Voyez si le résultat de l'empaquetage et de la compilation de la saisie de webpack ./app.js ./dist/bundle.js est le même qu'avant.

entrée : Spécifiez le fichier d'entrée empaqueté

1 Emballez un seul fichier dans un seul fichier de sortie et écrivez directement le nom du fichier, par exemple : entrée : "main.js "

2. Regroupez plusieurs fichiers dans un seul fichier de sortie et placez les noms de fichiers dans un tableau, par exemple : entrée :['main.js','xx.js']

3. Regroupez plusieurs fichiers dans plusieurs fichiers de sortie, mettez le nom du fichier dans une paire de clés, par exemple : entrée : {a:'main.js',b:'xx.js'}

sortie : configurer les résultats d'emballage

le chemin est le dossier de sortie défini, le nom de fichier est le nom du fichier de résultats d'emballage, si le fichier d'entrée d'emballage désigné est la 1 ou 2 situations ci-dessus, le nom de fichier est directement comme vous le souhaitez Le nom du fichier de sortie. S'il s'agit du troisième cas, le nom de fichier doit être écrit sous la forme [nom].filename.js, et [nom] dans le nom de fichier est la clé d'entrée.

Surveiller les modifications et empaqueter automatiquement

Lorsque nous continuons à apporter des modifications au code, afin de ne pas le modifier une seule fois, nous l'emballons à nouveau manuellement. Vous pouvez utiliser la fonction de surveillance de Webpack.

webpack --watch ou webpack -w

Ou vous pouvez définir watch sur true directement dans le code de configuration

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}
Utiliser Babel

Qu’est-ce que Babel ? Babel est un compilateur JavaScript. Utilisez-le pour convertir la syntaxe ES6 en syntaxe ES5 afin qu'elle puisse être exécutée dans les environnements actuels.

Exécuter dans le terminal : npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

Une fois l'installation terminée, vous devez modifier le webpack précédent. config.js à :

Vous pouvez maintenant écrire du code dans le fichier en utilisant la syntaxe ES6. Testons-le en ajoutant :

module.exports = {
 entry: "./app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    loader: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

ES6 prend en charge la méthode de la flèche. Si vous pouvez voir le texte imprimé « J'utilise maintenant Babel ! » sur la console, cela signifie que notre module Babel est installé avec succès et que vous pouvez commencer à écrire du code en utilisant ES6. 

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);
L'élément loaders indique le chargeur utilisé pour charger ce type de ressource.

test est une expression régulière, indiquant le type de ressource à faire correspondre.

exclude spécifie les fichiers qui doivent être ignorés. Nous spécifions /node_modules/ ici.

La requête a deux façons d'écrire, l'une consiste à suivre directement le nom du chargeur sous forme de chaîne :

L'autre est comme indiqué dans cet article : 

loader: &#39;babel-loader?presets[]=es2015

resolve.extensions est utilisé pour indiquer quels suffixes le programme complète et reconnaît automatiquement 

query: {
 presets: [&#39;es2015&#39;]
}
Notez que le premier dans les extensions est une chaîne vide correspondant à la situation où les suffixes ne sont pas nécessaires.

5. Combiner React

Nous avons déjà configuré et introduit Webpack et Babel L'environnement de base a été mis en place. Nous commençons maintenant à utiliser React.

Entrez le code suivant dans le terminal pour installer React et React-dom

Tous les plug-ins par défaut de Babel pour React

npm install react react-dom --save

Depuis que nous avons ajouté React Le plug-in par défaut, donc webpack.config.js doit être modifié. 

npm install babel-preset-react --save-dev
Modifiez la requête sous module ->loaders comme suit :

Créez maintenant un fichier nommé hello.js 

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

Puis app. js sont modifiés comme suit : 

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

如何解决iview 的select下拉框选项错位的问题，具体操作如下

如何通过Vue.js实现select下拉列表，具体操作如下

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：Introduction détaillée à la configuration associée de scss dans webpackArticle suivant：Introduction détaillée à la configuration associée de scss dans webpack

Articles Liés

Voir plus