Explication détaillée des méthodes de configuration npm et webpack dans node.js

Node.js est écrit en langage C++. Il s'agit d'un environnement d'exécution javascript basé sur le moteur Chrome V8. Il permet à javascript de s'exécuter indépendamment du serveur du navigateur. Vous pouvez utiliser le langage javascript pour écrire du code côté serveur. présente l'explication détaillée de node. Les amis qui en ont besoin peuvent se référer à la configuration de npm et webpack dans js. J'espère que cela pourra aider tout le monde.

1. Utilisez node pour implémenter un serveur http

Un serveur avec le port 8787 est créé ci-dessous. Il est différent de php, java, etc., comme php localement, il est également basé sur. le serveur Apache Node.js peut rapidement créer un serveur en utilisant du code.

// 引入http模块
var http = require("http");
// 调用http的接口创建服务器；回调--->异步；
var server = http.createServer(function(req,res){
 // request:浏览器提交给服务器相关；response:服务器到浏览器；
 console.log(111);
 // 设置编码格式
 res.setHeader("Content-type","text/html;charset=utf8");
 res.write("<h1>hello world 11233</h1>");
 res.write("你好世界");
 res.end();
})
server.listen(8787);

Modularisation

1. Développement modulaire

1. CommonJS consiste à formuler des spécifications pour les performances de JS Parce que js n'a pas la fonction de modules, CommonJS. est né Health, il espère que js pourra s'exécuter n'importe où, pas seulement dans le navigateur.

2. Créez votre propre module

L'espace de noms dans node.js est indépendant

Pour introduire des méthodes ou des variables d'un autre module dans un module, utilisez require

•Introduction du module fnData

require("./fnData");

•Importer et exporter (exporter des variables ou des fonctions)

module.exports = {
myFn:test.myFn,
a:test.a
}

2. -in Module

les modules intégrés de nodejs incluent : Buffer, C/C++Addons, Processus enfants, Cluster, Console, Cr

ypto, Débogueur, DNS, Domaine, Erreurs, Événements , Système de fichiers,

Globals, HTTP, HTTPS, Modules, Net, OS, Chemin, Processus, P unycode, Chaînes de requête, Readline, REPL, Stream, Décodeur de chaîne, Minuteries, TLS/SSL, TTY, UDP /Datagram, URL, Utilities, V8, VM, ZLIB ; les modules intégrés n'ont pas besoin d'être installés, les modules externes doivent être installés

3. de modules, qui est la gestion des packages du nœud

Les commandes de terminal npm couramment utilisées suivantes

1.

Installer le module de nœud

npm install moduleNames

Installer le package globalement Environnement

npm install -g

En même temps que l'installation, s'il existe un fichier package.json, la commande écrira les informations dans le chemin du projet dans package.json

npm install --save

2 Affichez le dossier package.json du module de nœud npm view moduleNames

<.>3. Afficher les packages de nœuds installés dans le répertoire actuel

liste npm

4. Afficher la commande d'aide

npm help

5. dependencies

npm view moudleName dependencies

6. Afficher l'adresse du fichier source du package

npm view moduleName deposit.url

7. de Node dont dépend le package

npm view moduleName moteurs

8. Afficher tous les dossiers utilisés par npm

dossiers d'aide npm

Utilisé pour reconstruire après avoir modifié le contenu du package

npm reconstruction moduleName

10. Vérifiez si le package est obsolète. Cette commande répertorie tous les packages obsolètes et vous pourrez mettre à jour le package à temps

npm obsolète

11. Mettre à jour le module de nœud

npm update moduleName

12. Désinstaller le module de nœud

npm désinstaller moudleName

13. Un package npm est un dossier contenant package.json, package .json décrit la structure de ce dossier. La méthode pour accéder au dossier json de npm est la suivante :

$ npm help json

Cette commande ouvrira une page Web de la manière par défaut. Si le programme d'ouverture par défaut est modifié, il se peut qu'il ne le soit pas. ouvrez la page Web de la manière par défaut.

14. Lors de la publication d'un package npm, vous devez vérifier si un certain nom de package existe déjà

$ npm search packageName

15.npm init: vous guidera vers créez un fichier package.json, comprenant le nom, la version, les informations sur l'auteur, etc.

16.npm root : affichez le chemin d'installation du package actuel

npm root -g : affichez l'installation chemin du package global

17.npm -v : Afficher la version installée par npm

4 webpack

Concept : C'est un chargeur et un outil de packaging récent qui peut. Combinez diverses ressources. Par exemple, J (y compris J X), le café, les styles (y compris less/sass), les images, etc. sont tous utilisés et traités comme des modules.

Étapes de configuration

1. Installez webpack globalement

npm install webpack -g

2. Créez un nouveau webpack.config.js pour écrire ce fichier de configuration.

3. Utilisez la commande de terminal suivante pour initialiser et créer automatiquement le fichier package.json. Continuez simplement à appuyer sur

npm init

module.exports = {
// 当前执行文件的路径
 // 输入
 entry:__dirname+"/app/index.js",
 // 输出
 output:{
  path:__dirname+"/build",
  filename:"bundle.js"
 },
 module:{
  loaders:[{
   test:/\.css$/,
   loader:"style-loader!css-loader"
  }]
 },
 watch:true,
 devServer: {
  contentBase: "./build",//本地服务器所加载的页面所在的目录
  historyApiFallback: true,//不跳转
  inline: true//实时刷新
 },
}

4. Le fichier .json est prêt. Nous installons Webpack en tant que package dépendant dans ce projet

Ensuite, créons une nouvelle application et construisons le dossier dans le dossier L'application contient les fichiers js, css et autres fichiers de module que nous avons. voulez écrire, et webpack est placé dans le dossier build. Packagez le fichier js généré et un index.html

La structure des répertoires est la suivante :

// 安装Webpack
npm install --save-dev webpack

5. Introduisez le bundle généré automatiquement dans le fichier inex.html .js

Définissez certaines variables et méthodes dans module1.js, utilisez les exportations pour exporter en tant que module

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <p class="p1"></p>
 <!--webpack/gulp/grount-->
</body>
<script src="bundle.js"></script>
</html>

Utilisez require dans index.js pour introduire la méthode de module.js Avec des variables

console.log("我是module1.js");
var a = "我是a变量";
var fn = function(){
 console.log("我是fn函数");
}
module.exports = {
 a,
 fn
}

6 Exécutez webpack dans le terminal

webpack

var res = require("./module1");
require("./index.css");
console.log("我是index.js");
console.log(res.a);
res.fn();

7. avec la configuration des scripts dans package-loack.json

Enfin, vous pouvez utiliser la simple commande npm start dans la ligne de commande pour remplacer la commande webpack

Après la configuration comme ci-dessous, npm dev peut remplacer le npm webpack-dev-server --open command

Entrez npm start à ce moment pour empaqueter le fichier

{
 "dependencies": {
 "css-loader": "^0.28.8",
 "style-loader": "^0.19.1",
 "webpack": "^3.10.0"
 },
 "devDependencies": {
 "webpack-dev-server": "^2.11.0"
 },
 "scripts": {
 "start": "webpack",
 "dev": "webpack-dev-server --open"
 }
}

Recommandations associées :

Explication détaillée du rendu back-end après la configuration du webpack

Exemple d'explication détaillée de la configuration du webpack optimisé par vue-cli

React et Webpack créent un packaging Explication détaillée des exemples d'optimisation

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!