TypeScript+Jasmine+Karma+webpackとかの設定

karma.conf.ts

// ここからコンパイル型情報の調整用スクリプト
import * as karma from "karma";
import * as karmaCoverage from "karma-coverage";
import * as webpack from "webpack";

// @types/karma-webpackはなかったのでここで作成
// webpack用のオプションを設定できるようにする
namespace karmaWebpack {
    export interface ConfigOptions extends karma.ConfigOptions {
        webpack: webpack.Configuration;
    }
}

// 必要なプラグイン（ここでは karma-coverage と、 karma-webpack）
// の設定情報をすべて記載できるように取り込んだインターフェース
interface PluggedConfig extends karma.Config {
    set: (config: karmaCoverage.ConfigOptions & karmaWebpack.ConfigOptions) => void;
}
// ここまで型情報調整用スクリプト


// webpack.config.tsの設定を、entryの情報だけ削除して流用する。
// https://github.com/webpack-contrib/karma-webpack/issues/231#issuecomment-285713701
import webpackConfig from "./webpack.config";
delete webpackConfig.entry;


module.exports = (config: PluggedConfig) => {
    config.set({

        // 相対パスを解釈する際の基準 (files, excludeなどで使われる)
        basePath: "",

        // 使用するテストフレームワーク
        frameworks: ["jasmine"],

        // ファイルのリスト　か　ブラウザに読ませるパターン
        files: [
            "test/*.ts"
        ],

        // 除外するファイル
        exclude: [],

        // ブラウザに渡す前になんかしら処理するやつら
        preprocessors: {
            "test/*.ts": ["webpack", "sourcemap"]
        },

        // テスト結果を伝える相手
        reporters: ["mocha", "coverage"],

        // カバレッジをだすレポーターの設定
        coverageReporter: {
            dir: "report",
            reporters: [
                { type: "html" },
                { type: "cobertura" }
            ]
        },

        // webpack用の設定
        webpack: webpackConfig,

        // web server port
        port: 9876,

        // レポーターとかログを色付きで表示するか
        colors: true,

        // ログレベル設定
        logLevel: config.LOG_INFO,

        // ファイルの変更を検知して勝手に動くかどうか
        autoWatch: true,

        // 起動するブラウザ
        browsers: ["PhantomJS"],

        // CIするならtrueとかなんとか
        singleRun: true,

        // ブラウザをいくつまで並行で立ち上げるか
        concurrency: Infinity
    });
};

package.json

{
  "name": "bookchain-web-client",
  "version": "1.0.0",
  "description": "web client for bookchain.",
  "main": "index.js",
  "scripts": {
    "test": "karma start",
    "build": "webpack",
    "build:prod": "cross-env NODE_ENV=production webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kbc-itw/BookChain.git"
  },
  "author": "kbc-itw",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/kbc-itw/BookChain/issues"
  },
  "homepage": "https://github.com/kbc-itw/BookChain#readme",
  "dependencies": {},
  "devDependencies": {
    "@types/jasmine": "^2.5.53",
    "@types/karma": "^0.13.36",
    "@types/karma-coverage": "^0.5.32",
    "@types/node": "^8.0.7",
    "@types/webpack": "^3.0.1",
    "cross-env": "^5.0.1",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine": "^2.6.0",
    "karma": "^1.7.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-typescript-preprocessor": "^0.3.1",
    "karma-webpack": "^2.0.3",
    "ts-loader": "^2.2.1",
    "ts-node": "^3.1.0",
    "tslint": "^5.4.3",
    "tslint-config-airbnb": "^5.2.1",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.4.1",
    "webpack": "^3.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
    "lib": ["dom", "es2015"],                 /* Specify library files to be included in the compilation:  */
    "sourceMap": false,                       /* Generates corresponding '.map' file. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noUnusedLocals": true,                   /* Report errors on unused locals. */
    "noUnusedParameters": true                /* Report errors on unused parameters. */
  },
  "exclude": [
    "node_modules",
    "webpack.config.ts",
    "karma.conf.ts"
  ]
}

tslint.json

{
    "extends": "tslint-config-airbnb",
    "rules": {
        "quotemark": [true, "double"],
        "ter-indent": [true, 4],
        "trailing-comma": false
    }
}

webpack.config.ts

import { Configuration, Output, Plugin, optimize } from "webpack";
import * as path from "path";


// 環境変数 `NODE_ENV` が本番環境用であるか否か。
const inProduction: boolean = process.env.NODE_ENV === "production";


// バンドルした結果を、どこにどういう名前で出力するか
function output(): Output {
    if (inProduction) {
        return {
            path: path.resolve(__dirname, "dist"),
            filename: "[name].bundle.min.js"
        };
    } else {
        return {
            path: path.resolve(__dirname, "dist"),
            filename: "[name].bundle.js"
        };
    }
}


// デバッグ強化開発者用ツール
// ソースマップを出力するか否か。
function devTool(): "inline-source-map" | boolean {
    if (inProduction) {
        return false;
    } else {
        return "inline-source-map";
    }
}


// webpack プラグイン
function plugins(): Plugin[] {
    if (inProduction) {
        // 本番環境用では、jsファイルの最小化を行う
        return [
            new optimize.UglifyJsPlugin()
        ];
    } else {
        // 開発環境だと（圧縮処理が重いので）なし
        return [];
    }
}


/**
 * webpack用の設定オブジェクト
 */
const config: Configuration = {
    // ※ karmaでテスト用にバンドルする際にはこのentryは無視する。
    entry: {
        app: "./src/index.ts"
    },
    output: output(),
    devtool: devTool(),
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.tsx?$/,
                loader: "tslint-loader"
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            },
            {
                enforce: "post",
                test: /.tsx?$/,
                exclude: /(test|node_modules)/,
                loader: "istanbul-instrumenter-loader"
            }
        ]
    },
    plugins: plugins()
};


export default config;