How to quickly build a web test project?

This article shares with you how to quickly build a web testing project? The content is very detailed, let's take a look at the specific content, I hope it can help everyone.

If you simply run a piece of js logic, you don’t need to build a test project. You can just write a js and run it on the node command line. However, often you cannot do this when you read a piece of other people’s source code and want to test it yourself. Because others will rely on modules, operate browser dom, etc., it is sometimes useful to write a small test demo yourself.

There are no dom elements or window global objects in nodejs, so our code is best run on the browser side, so it is essential to construct an index.html, and then introduce the corresponding js, so That’s it? It's not that simple.

npm init initialization project

Other people’s code relies on some modules and uses ES6 syntax, so we need to make our node environment support ES6 syntax, then we need to introduce babel. Initialize it with npm init, and node will create a package.json for you to manage your dependency packages and command configuration.

babel configuration

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

Then use

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

to solve the syntax problem of ES6, but you will find that the browser does not even support require, of course , I have never heard of require syntax in JavaScript. So we need to use a build tool to compile the code into js that the browser can recognize. Webpack is used here for packaging modularization.

Webpack packaging and building

Remember to install it globally firstwebpack：

npm i webpack -g

Then we can package your js through configuration, The following is the simplest configuration: Study the configuration of

const path = require('path');

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

webpack by yourself, and recommend "Webpack Explained in a Simple Way".

Run

webpack --config webpack.config.js

to package your js. The directory is the dist folder of the current directory. Of course, index.html must introduce this js if it wants to work.

Use webpack-dev-server to start the service

Do you find that you need to package it every time you change the code? This must be very annoying, so use webpack-dev-server to start one locally service, so you can refresh and see the changes when you make changes.
We build server.js, like this

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

After running node server.js, we can serve seven local 3040 ports. After that, you can see what you want to write in index.html. Logic Nature can also run.
Related recommendations:

What should I do if IE is not compatible and cannot open the web page? Tips for solving js browser incompatibility issues

The above is the detailed content of How to quickly build a web test project?. For more information, please follow other related articles on the PHP Chinese website!