Detaillierte Erläuterung der NPM- und Webpack-Konfigurationsmethoden in node.js

Node.js ist eine Javascript-Laufumgebung, die auf der Chrome V8-Engine basiert. Sie ermöglicht die Ausführung von Javascript hauptsächlich zum Schreiben von serverseitigem Code stellt die detaillierte Erklärung des Knotens vor. Freunde, die es benötigen, können auf die npm- und Webpack-Konfiguration in js verweisen.

1. Verwenden Sie einen Knoten, um einen http-Server zu implementieren.

Es wird ein Server mit Port 8787 erstellt, der sich von PHP, Java usw. unterscheidet und auf dem auch lokal basiert Der Apache-Server kann mithilfe von Code schnell einen Server erstellen.

// 引入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);

Modularisierung

1. CommonJS dient dazu, Spezifikationen für die Leistung von JS zu formulieren Health entstand und hofft, dass js überall ausgeführt werden kann, nicht nur im Browser.

2. Erstellen Sie Ihr eigenes Modul

Der Namespace in node.js ist unabhängig

Um Methoden oder Variablen eines anderen Moduls in ein Modul einzuführen, verwenden Sie require

•Einführung des fnData-Moduls

require("./fnData");

•Import und Export (Variablen oder Funktionen exportieren)

2 -in Module

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

nodejs integrierte Module umfassen: Puffer, C/C++Addons, untergeordnete Prozesse, Cluster, Konsole, Cr

ypto, Debugger, DNS, Domäne, Fehler, Ereignisse , Dateisystem,

Globale, HTTP, HTTPS, Module, Netz, Betriebssystem, Pfad, Prozess, P unycode, Abfragezeichenfolgen, Readline, REPL, Stream, String-Decoder, Timer, TLS/SSL, TTY, UDP /Datagram, URL, Utilities, V8, VM, ZLIB; integrierte Module müssen installiert werden

3 von Modulen, also der Paketverwaltung des Knotens

Die folgenden häufig verwendeten NPM-Terminalbefehle

1.

Knotenmodul installieren

npm install moduleNames

Installieren Sie das Paket global Umgebung

npm install

Wenn zur gleichen Zeit der Installation eine package.json-Datei vorhanden ist, schreibt der Befehl die Informationen in den Projektpfad in package.json

npm install --save

2. Zeigen Sie den Ordner package.json des Knotenmoduls npm view moduleNames an

3. Die installierten Knotenpakete im aktuellen Verzeichnis anzeigen

npm-Liste

npm-Hilfe

5 Abhängigkeiten

npm view moduleName dependencies

6. Zeigen Sie die Quelldateiadresse des Pakets an

npm view moduleName inventory.url

7 des Knotens, von dem das Paket abhängt

npm view moduleName engine

8 Alle von npm verwendeten Ordner anzeigen

npm-Hilfeordner

9 Nach Änderung des Paketinhalts neu erstellen

npm rebuild moduleName

10. Überprüfen Sie, ob das Paket veraltet ist, und Sie können das Paket rechtzeitig aktualisieren

npm veraltet

11. Aktualisieren Sie das Knotenmodul

npm update moduleName

12. Deinstallieren Sie das Knotenmodul

npm uninstall moduleName

13. Ein npm-Paket ist ein Ordner, der package.json enthält. Paket .json beschreibt die Struktur dieses Ordners. Die Methode für den Zugriff auf den JSON-Ordner von npm lautet wie folgt:

$ npm help json

Dieser Befehl öffnet eine Webseite auf die Standardmethode. Wenn das Standardöffnungsprogramm geändert wird, ist dies möglicherweise nicht der Fall Öffnen Sie die Webseite in der Standardform.

14. Wenn Sie ein npm-Paket veröffentlichen, müssen Sie prüfen, ob ein bestimmter Paketname bereits vorhanden ist.

$ npm search packageName

15.npm init: führt Sie dorthin Erstellen Sie eine package.json-Datei, einschließlich Name, Version, Autoreninformationen usw.

16.npm root: Zeigen Sie den Installationspfad des aktuellen Pakets an

npm root -g: Sehen Sie sich die Installation an Pfad des globalen Pakets

17.npm -v: Zeigt die von npm installierte Version an

4. Webpack

Konzept: Es handelt sich um ein aktuelles Loader- und Verpackungstool, das dies kann Kombinieren Sie verschiedene Ressourcen, zum Beispiel J (einschließlich J X), Kaffee, Stile (einschließlich weniger/sass), Bilder usw. werden alle als Module verwendet und verarbeitet.

Konfigurationsschritte

1. Webpack global installieren

npm install webpack -g

2. Erstellen Sie eine neue webpack.config.js, um diese Konfigurationsdatei zu schreiben

3. Verwenden Sie den folgenden Terminalbefehl, um die Datei package.json zu initialisieren und automatisch zu erstellen:

npm init

Die .json-Datei ist fertig. Wir installieren Webpack als abhängiges Paket in diesem Projekt

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//实时刷新
 },
}

Dann erstellen wir eine neue App und einen Build-Ordner im Ordner. Der App-Ordner enthält die JS-, CSS- und anderen Moduldateien Ich möchte schreiben und Webpack wird im Build-Ordner abgelegt. Packen Sie die generierte js-Datei und eine index.html.

Die Verzeichnisstruktur ist wie folgt:

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

5. Fügen Sie das automatisch generierte Bundle in die Datei inex.html ein >Verwenden Sie require in index.js, um die Methode von module.js mit Variablen einzuführen

6. Führen Sie webpack im Terminal aus

webpack

7 mit Skriptkonfiguration in package-loack.json

<!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>

Schließlich können Sie den einfachen Befehl npm start in der Befehlszeile verwenden, um den Webpack-Befehl zu ersetzen

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

Nach der Konfiguration wie unten kann npm dev den ersetzen npm webpack-dev-server --open Befehl

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

Geben Sie zu diesem Zeitpunkt npm start ein, um die Datei zu packen

Verwandte Empfehlungen:

Detaillierte Erläuterung des Back-End-Renderings nach der Webpack-Konfiguration

Beispiel für eine ausführliche Erläuterung der für Vue-Cli optimierten Webpack-Konfiguration

React und Webpack erstellen Pakete. Detaillierte Erläuterung der Optimierungsbeispiele

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der NPM- und Webpack-Konfigurationsmethoden in node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!