如何快速建立一個web測試專案？

本篇文章分享給大家的內容是關於如何快速建立一個web測試專案？內容很詳細，接下來我們就來看看具體的內容，希望可以幫助大家。

單純的運行一段js邏輯的話就不需要建立測試項目，直接寫個js，node命令列運行一下就可以了，但是往往閱讀一段他人的源碼想要自己測試一下就沒辦法這樣子，因為別人會依賴模組，會操作瀏覽器dom等等，所以自己寫一個測試小demo有時候就很有用處。

nodejs裡面又沒有什麼dom元素，什麼window全域對象，所以我們的程式碼最好運行在瀏覽器端，那麼建構一個index.html是必不可少的，然後引入對應的js，這樣就可以了？哪有這麼簡單。

npm init 初始化專案

別人的程式碼裡面依賴了一些模組，也用了ES6的語法，所以我們需要讓我們的node環境支援ES6語法，那就需要引入babel。用npm init初始化一下，node就會為你建立一個package.json，用來管理你的依賴包，命令配置。

babel的設定

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

然後透過

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

的方式來解決ES6的語法問題，但你會發現瀏覽器連require都不支持，那是當然的，JavaScript裡面從來沒聽過require語法。所以我們需要用到建置工具把程式碼編譯成瀏覽器可以辨識的js。這裡就要用到webpack來進行打包模組化。

webpack打包建置

記好先全域安裝webpack：

npm i webpack -g

然後我們就可以透過設定來對你的js進行打包了，以下是最簡單的設定：

const path = require('path');

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

webpack的設定自行研究，推薦《深入淺出Webpack》。

運行

webpack --config webpack.config.js

就可以打包你的js了，目錄就是目前目錄的dist資料夾下。當然想要起作用index.html必須引進這個js。

使用webpack-dev-server起服務

你是否發現每次更改程式碼就需要打包一下，這樣肯定很煩啊，所以利用webpack-dev-server在本地起一個服務，方便在你做出修改時刷新就可以看到變化。
我們建立server.js,像這樣

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

之後運行node server.js就可以在本地3040埠七個服務，之後你想在index.html寫什麼東西自己看著吧，邏輯自然也可以運行。
相關推薦：

ie不相容打不開網頁怎麼辦？ js瀏覽器不相容問題解決技巧

以上是如何快速建立一個web測試專案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！