Comment construire rapidement un projet de test web ?

Cet article vous explique comment créer rapidement un projet de test Web ? Le contenu est très détaillé, jetons un œil au contenu spécifique, j'espère qu'il pourra aider tout le monde.

Si vous exécutez simplement un élément de logique js, vous n'avez pas besoin de créer un projet de test. Vous pouvez simplement écrire un js et l'exécuter sur la ligne de commande du nœud. Cependant, vous ne pouvez souvent pas le faire. vous lisez un morceau de code source d'autres personnes et souhaitez le tester vous-même. Parce que d'autres s'appuieront sur des modules, utiliseront le navigateur dom, etc., il est parfois utile d'écrire vous-même une petite démo de test.

Il n'y a pas d'éléments dom ni d'objets globaux window dans nodejs, donc notre code est mieux exécuté côté navigateur, il est donc essentiel de construire un index.html, puis d'introduire le js correspondant, donc c'est tout ? Ce n'est pas si simple.

Projet d'initialisation npm init

Le code d'autres personnes repose sur certains modules et utilise la syntaxe ES6, nous devons donc faire en sorte que notre environnement de nœud prenne en charge la syntaxe ES6, puis nous devons introduire Babel. Initialisez-le avec npm init et le nœud créera un package.json pour vous permettre de gérer vos packages de dépendances et la configuration des commandes.

configuration babel

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

puis utilisez

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

pour résoudre le problème de syntaxe ES6, mais vous constaterez que le navigateur ne prend même pas en charge require Of. bien sûr, je n’ai jamais entendu parler de la syntaxe require en JavaScript. Nous devons donc utiliser un outil de build pour compiler le code en js que le navigateur puisse reconnaître. Webpack est utilisé ici pour la modularisation du packaging.

Emballage et construction du Webpack

N'oubliez pas de l'installer d'abord globalementwebpack :

npm i webpack -g

Ensuite, nous pouvons empaqueter votre js via la configuration, comme suit La configuration la plus simple : Étudiez par vous-même la configuration de

const path = require('path');

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

webpack et recommandez "Webpack de manière simple".

Exécutez

webpack --config webpack.config.js

pour empaqueter votre js Le répertoire est le dossier dist du répertoire actuel. Bien sûr, index.html doit introduire ce js s'il veut fonctionner.

Utilisez webpack-dev-server pour démarrer le service

Trouvez-vous que vous devez le packager à chaque fois que vous modifiez le code Cela doit être très ennuyeux, alors utilisez webpack-dev- ? serveur pour démarrer un service localement, afin que vous puissiez actualiser et voir les modifications lorsque vous apportez des modifications.
Nous construisons server.js comme ceci

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/');
});

, puis exécutons node server.js pour servir sept ports 3040 locaux. Vous pourrez voir ce que vous voulez écrire dans index.html plus tard, la logique peut le faire. aussi courir naturellement.
Recommandations associées :

Que dois-je faire si IE n'est pas compatible et ne peut pas ouvrir la page Web ? Conseils pour résoudre les problèmes d'incompatibilité du navigateur js

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!