Web テスト プロジェクトをすばやく構築するにはどうすればよいですか?

この記事では、Web テスト プロジェクトをすばやく構築する方法を説明します。非常に詳しい内容となっておりますので、皆様のお役に立てれば幸いです。

単に JS ロジックを実行する場合は、テスト プロジェクトを構築する必要はありません。ただし、他の人のソースを読む場合は、JS を作成してノード コマンド ラインから実行するだけです。コードを作成して自分でテストしたいと思っても、他の人がテストするのでそれはできません。モジュールに依存したり、ブラウザ DOM を操作したりできるため、小さなテスト デモを自分で書くと非常に役立つ場合があります。

nodejs には dom 要素やウィンドウ グローバル オブジェクトがないため、コードはブラウザ側で実行するのが最適です。したがって、index.html を構築して、対応する js を導入することが重要です。それはそれほど単純ではありません。

npm init初期化プロジェクト

他の人のコードはいくつかのモジュールに依存しており、ES6構文を使用しているため、ノード環境をES6構文をサポートする必要があり、その後babelを導入する必要があります。 npm init で初期化すると、依存関係パッケージとコマンド構成を管理するための package.json がノードによって作成されます。

babel 設定

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

を使用して ES6 の構文問題を解決しますが、ブラウザが require さえサポートしていないことがわかります。もちろん、JavaScript での require 構文については聞いたことがありません。したがって、ビルド ツールを使用してコードをブラウザが認識できる js にコンパイルする必要があります。ここでは、パッケージ化のモジュール化に Webpack を使用します。

Webpack のパッケージ化とビルド

最初に webpack をグローバルにインストールすることを忘れないでください:

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

次に、構成を通じて JS をパッケージ化します。 以下は最も単純な構成です: 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 --config webpack.config.js

webpack の設定については、「簡単な Webpack 入門」を参照してください。

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

を実行してjsをパッケージ化します。ディレクトリは現在のディレクトリのdistフォルダーです。もちろん、index.html が機能するためには、この JS を導入する必要があります。

webpack-dev-server を使用してサービスを開始します

コードを変更するたびにパッケージ化する必要があることに気づきましたか。これは非常に面倒なので、webpack-dev-server を使用してローカルでサービスを開始します。簡単に変更を加えることができるため、時々更新して変更を確認できます。

server.js を次のように構築します

rrreee
次に、7 つのローカル 3040 ポートを提供するために、node server.js を実行します。そうすれば、index.html に書きたい内容が表示され、ロジックが自然に実行されます。

関連する推奨事項:

IE に互換性がなく、Web ページを開けない場合はどうすればよいですか? jsブラウザの非互換性の問題解決のヒント

🎜

以上がWeb テスト プロジェクトをすばやく構築するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。