次の開発セットアップがあります。
- Angular2 (Typescript あり)
- パッケージング用の Webpack
- Jasmine テストのテスト ランナーとしての Karma
- Karma を呼び出すための Gulp
Karma は次のように構成されます。
var webpackConfig = require('./webpack.config');
webpackConfig.entry = {};
module.exports = function(config) {
config.set({
basePath: '',
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
reporters: [],
coverageReporter: {},
port: 9876,
action: 'run',
colors: true,
logLevel: config.LOG_INFO, // LOG_DEBUG | LOG_INFO | LOG_WARN | LOG_ERROR
autoWatch: false,
autoWatchBatchDelay: 300,
singleRun: true,
files: [ { pattern: './spec-bundle.js', watched: false } ],
exclude: [],
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./spec-bundle.js': ['webpack']
},
webpack: webpackConfig,
// https://webpack.github.io/docs/webpack-dev-middleware.html
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
plugins: [
'karma-coverage',
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-teamcity-reporter',
'karma-webpack'
]
});
}
Webpack は次のように構成されます。
var webpack = require('webpack');
module.exports = {
entry: {
main: './src/run.ts'
},
target: 'web', // 'web' | 'node'
output: {
filename: '[name].js',
pathinfo: true
},
devtool: 'source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
resolveLoader: {
modulesDirectories: ['node_modules']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' },
// fastclick contains AMD and CJS loader logic - disable AMD so CJS is used
{ test: require.resolve('fastclick'), loader: 'imports?define=>false' }
],
postLoaders: [
{ test: /\.ts$/, exclude: /(node_modules|spec)\//, loader: 'istanbul-instrumenter' }
]
},
stats: {
colors: true,
errorDetails: true,
modules: false,
reasons: true // add information about the reasons why modules are included
}
};
ts は次のように構成されます。
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"moduleResolution": "node",
"noEmitHelpers": true,
"module": "commonjs",
"outDir": "../dist/app",
"sourceMap": true
},
"buildOnSave": false,
"compileOnSave": false
}
(/node_modules は /src と同じレベルにあり、tsconfig.json は /src フォルダーにあります)。
そのため、lodash、fastclick などのさまざまな *.d.ts ファイルを含む /src/typings フォルダーがあります。Karma を呼び出すと、定義ごとに次のメッセージが表示されます。
WARNING in ./src/typings/lodash/lodash.d.ts
Module build failed: Error: Typescript emitted no output for /Users/jbrighton/src/teammember-client/src/typings/lodash/lodash.d.ts
at Object.loader (/Users/jbrighton/src/teammember-client/node_modules/ts-loader/index.js:456:15)
@ ./src \.ts
Jasmine テストは正常に実行されます (テスト以外のビルドは正常に実行されます) が、これらのメッセージの原因と回避方法を教えてください。