7

次の開発セットアップがあります。

  • 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 テストは正常に実行されます (テスト以外のビルドは正常に実行されます) が、これらのメッセージの原因と回避方法を教えてください。

4

0 に答える 0