セットアップ環境はすべてのソフトウェア開発プロジェクトの重要なステップです.あなたがTypeScriptとMochaを単位テストフレームワークとして使っているウェブ開発プロジェクトを準備する方法を探しているならば、このポストはあなたのためです.
このポストでは、次のように表示します.

ウェブ開発環境の設定方法.

typescriptとwebpack を使用してプロジェクトを構築する方法.

24579152による単体テストの設定方法.

バベル 始める

モカ NPMプロジェクトの新規作成

まず、新しいNPMプロジェクトを作成する必要があります.プロジェクトフォルダを作成し、NPMプロジェクトを初期化します.$ npm init -y

必須ライブラリのインストール

1 .インストール$ npm i -D webpack webpack-cliバベルのインストール$ npm i -D @babel/core @babel/preset-env babel-loader3 .インストールスクリプト$ npm i -D typescript ts-node @babel/preset-typescriptモカインストール$ npm i -D mocha @types/mocha

設定ファイルの作成

1 . Webpackを作成します.設定.js
ウェブパックを作成します.設定.プロジェクトフォルダのJSと下記の内容をペーストします

const path = require("path");

module.exports = [
  {
    entry: "./src/main.ts",
    output: {
      path: path.join(__dirname, "build"),
      filename: "main.js",
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    target: "web",
    node: {
      __dirname: false,
    },
  }
];

2 . createベーベック
クリエイト.プロジェクトフォルダのBabelrcと以下の内容をペーストします

{
    "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

3 . tconfigを作成します.テストJSON
tsconfigを作成します.テストプロジェクトフォルダ内のJSON

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "lib": ["es2017"],
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "inlineSourceMap": true,
    "moduleResolution": "node",
  }
}

4 . createMOCHARCJSON
tsconfigを作成します.テストプロジェクトフォルダ内のJSON

{
  "diff": true,
  "extension": ["js", "ts"],
  "package": "./package.json",
  "reporter": "spec",
  "require": "ts-node/register",
  "recursive": true,
  "slow": 75,
  "timeout": 60000,
  "ui": "bdd",
  "watch-files": ["src/**/*.js", "src/**/*.ts", "test/**/*.js", "test/**/*.ts"]
}

パッケージにNPMスクリプトを追加します.JSONを実行するには
Webpackを実行するには、NPMスクリプトを簡単にコマンドwebpackで使用する必要があります.

"scripts": {
  "build": "webpack",
  "test": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha"
}

それから、あなたは開発を始める準備ができています.