Skip to content

Instantly share code, notes, and snippets.

@sekky0905
Created February 14, 2017 14:56
Show Gist options
  • Save sekky0905/adc5bce7d408f3f8ecdd3d97a0a43c44 to your computer and use it in GitHub Desktop.
Save sekky0905/adc5bce7d408f3f8ecdd3d97a0a43c44 to your computer and use it in GitHub Desktop.
TypeScript + webpack + Karma + Mocha + Power Assertでテストを行う際の諸々の設定ファイル ref: http://qiita.com/Sekky0905/items/e54c7fc124c3f2b6d152
{
// パッケージの名前
"name": "パッケージ名",
// パッケージのバージョン
"version": "1.0.0",
// パッケージの説明
"description": "パッケージの説明文",
// 項目はパッケージの中で最初に呼ばれるモジュールのID
"main": "./dist/hoge.js",
// scriptコマンド
// key : イベント、value : コマンド
// keyで登録したイベントをnpmで行うときにvalueのコマンドが実行される
"scripts": {
// npm startで実行される
"start": "open resources/index.html",
// ビルド:実行可能ファイルを作成
"build": "webpack",
// テスト実行前に行うコマンド
"pretest": "npm run build",
// テストを実行
"test": "karma start"
},
// 作者
"author": "sekky0905",
// ライセンス
"license": "MIT",
"devDependencies": {
// DefinitelyTypedの型定義ファイル集積リポジトリからmochaの型定義ファイルをインストール
"@types/mocha": "^2.2.39",
// DefinitelyTypedの型定義ファイル集積リポジトリからpower-assertの型定義ファイルをインストール
"@types/power-assert": "^1.4.29",
// ブラウザ上で 単体テストを実行するためのテストランナーkarmaをインストール
"karma": "^1.4.1",
// karma start時に自動でブラウザが立ち上げ
"karma-chrome-launcher": "^2.0.0",
// karmaでmochaを使用するためのプラグイン
"karma-mocha": "^1.3.0",
// テスト結果の表示を装飾
"karma-mocha-reporter": "^2.2.2",
// JavaScriptのテスティングフレームワークmochaをインストール
"mocha": "^3.2.0",
// アサーションライブラリpower-assertをインストール
"power-assert": "^1.4.2",
// TypeScript用のwebpackのloaderをインストール
"ts-loader": "^2.0.0",
// TypeScriptをインストール
"typescript": "^2.1.6",
// モジュールハンドラwebpackをインストール
"webpack": "^2.2.1",
// power-assertをwebpack経由で使用するためのloaderをインストール
"webpack-espower-loader": "^1.0.1"
},
"dependencies": {},
"directories": {
"test": "test"
},
"repository": {
"type": "git",
"url": "githubとか"
},
"bugs": {
"url": "githubとか"
},
"homepage": "githubのREADMEとか"
}
module.exports = {
// ビルドのエントリーポイント(起点)
entry: {
// 通常のビルド用
"indexEntry": './src/ts/index.ts',
// テスト用のファイルを作成するためのビルド用
"testEntry": './test/testEntry.ts',
},
// 出力先
output: {
// 出力先のパス
path: './dist',
// 出力するファイルの名前
// nameには、entryでkeyに指定したエントリーポイントの名前が入る
filename: '[name].bundle.js'
},
// ビルドに必要なモジュールを指定
module: {
// loaderを指定
loaders: [
// test: ビルド対象を指定,
// include: ビルド対象に含める exclude: ビルド対象に含めない
// loader: 使用するローダー
{ test: /\.tsx?$/, exclude: /Spec\.ts$/, loader: 'ts-loader' },
// useは右から使われる
{ test: /Spec\.ts$/, use: ['webpack-espower-loader', 'ts-loader'] },
]
},
// モジュールの解決に使用するオプション
resolve: {
// ビルド対象のファイルの拡張子を配列で指定
extensions: [".tsx", ".ts", ".js"]
},
// devtool : デバッグを楽にするための開発者ツールの登録
// ビルドしたjavascriptにsource-mapを生成
devtool: 'inline-source-map',
};
// Karma configuration
module.exports = function (config) {
config.set({
// ベースパス
basePath: '',
// 使用するテスティングフレームワーク
frameworks: ['mocha'],
// karmaでブラウザで読み込むファイル(ここでts->js->bundle後のテストのファイルを指定する)
files: [
'./dist/testEntry.bundle.js',
],
// list of files to exclude
exclude: [
],
// テスト結果を装飾するreporterの種類
reporters: ['mocha'],
// 使用するポート番号
port: 9876,
// 表示する結果をカラーで表示
colors: true,
// logのレベル
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// テストファイルの変更を自動で監視
autoWatch: true,
// テストを実行するブラウザを設定
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
// CIモードにするかどうか、Circle CIでテストを通したかったら、ここをtrueに
singleRun: true,
// 同時にいくつのブラウザで実行可能にするかどうかの設定
concurrency: Infinity
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment