Wie erstellt man schnell ein Webtestprojekt?

In diesem Artikel erfahren Sie, wie Sie schnell ein Webtestprojekt erstellen können. Der Inhalt ist sehr detailliert. Schauen wir uns den spezifischen Inhalt an. Ich hoffe, er kann allen helfen.

Wenn Sie einfach eine JS-Logik ausführen, müssen Sie kein Testprojekt erstellen. Sie können dies jedoch oft nicht tun Sie lesen einen Teil des Quellcodes anderer Leute und möchten ihn selbst testen. Da andere auf Module angewiesen sind, den Browser-Dom bedienen usw., ist es manchmal nützlich, selbst eine kleine Testdemo zu schreiben.

Es gibt keine DOM-Elemente oder globalen Fensterobjekte in NodeJS, daher wird unser Code am besten auf der Browserseite ausgeführt. Daher ist es wichtig, eine index.html zu erstellen und dann die entsprechenden JS einzuführen. Das war's ? So einfach ist das nicht.

npm init-Initialisierungsprojekt

Der Code anderer Leute basiert auf einigen Modulen und verwendet die ES6-Syntax. Daher müssen wir dafür sorgen, dass unsere Knotenumgebung die ES6-Syntax unterstützt, und dann müssen wir Babel einführen. Initialisieren Sie es mit npm init, und der Knoten erstellt eine package.json, damit Sie Ihre Abhängigkeitspakete und Befehlskonfiguration verwalten können.

Babel-Konfiguration

npm install babel-register --save
npm install babel-preset-env --save

und dann

require("babel-register");
require("./test.js");

verwenden, um das ES6-Syntaxproblem zu lösen, aber Sie werden feststellen, dass der Browser nicht einmal „require“ unterstützt, natürlich habe ich das Ich habe noch nie von der erforderlichen Syntax in JavaScript gehört. Daher müssen wir ein Build-Tool verwenden, um den Code in js zu kompilieren, damit der Browser ihn erkennen kann. Zur Verpackungsmodularisierung kommt hier Webpack zum Einsatz.

Webpack-Paketierung und -Erstellung

Denken Sie daran, es zuerst global zu installierenwebpack:

npm i webpack -g

Dann können wir Ihr js durch Konfiguration packen. Das Folgende ist die einfachste Konfiguration: Studieren Führen Sie die Konfiguration von

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './index.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

webpack selbst durch und empfehlen Sie „Webpack einfach erklärt“.

Führen Sie

webpack --config webpack.config.js

aus, um Ihr js zu packen. Das Verzeichnis ist der dist-Ordner des aktuellen Verzeichnisses. Natürlich muss index.html dieses js einführen, wenn es funktionieren soll.

Verwenden Sie webpack-dev-server, um den Dienst zu starten

Finden Sie, dass Sie ihn jedes Mal packen müssen, wenn Sie den Code ändern, also verwenden Sie webpack-dev- Server, um einen lokalen Dienst zu starten, sodass Sie die Änderungen aktualisieren und sehen können, wenn Sie Änderungen vornehmen.
Wir erstellen server.js, so

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var compiler = webpack(config);

var server = new WebpackDevServer(compiler, {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    stats: {
        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: false,
        modules: false
    }
});

server.listen(3040, 'localhost', function(err, result) {
    if (err) {
        return console.log(err);
    }
    console.log('Listening at http://localhost:3040/');
});

und führen dann node server.js aus, um sieben lokale 3040-Ports zu bedienen. Dann können Sie sehen, was Sie in index.html schreiben möchten, und selbst sehen, die Logik, die auch die Natur ausführen kann.
Verwandte Empfehlungen:

Was soll ich tun, wenn IE nicht kompatibel ist und die Webseite nicht öffnen kann? Tipps zur Lösung von JS-Browser-Inkompatibilitätsproblemen

Das obige ist der detaillierte Inhalt vonWie erstellt man schnell ein Webtestprojekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!