web-dev-qa-db-ja.com

Karma + Webpack（バベルローダー）+ ES6「予期しないトークンのインポート」

/ edit：問題を示す最小限の構成を完全に削除しました。また、GitHubに作業プロジェクトをアップロードしました。これをチェックアウトできるので、自分で確認できます。

GitHubの問題のあるユースケース： webpack-angular15-es6-karma （ 7zアーカイブのダウンロード ）

npm install
npm run build
npm run test

関連する質問がいくつかありますが、世界は非常に速く動いており、現在提案されているソリューションでこの問題を解決できないほど多くの要因/依存関係があります。

私はすべてのソースコードを処理するwebpack configを持っていますが、うまく機能します。

テストでは、その構成を再利用して、ソースとテストファイルの両方を読み込む単一の中央エントリスクリプトを処理します。モジュールをソースコードからテスト用のテストコードにインポートする別の方法を見つけることができませんでした。

Karmaは私のwebpack設定を再利用してうまくビルドしますが、ブラウザは開かれるとすぐにエラーを報告します。

ソースコードはES6インポートを使用し、webpack requireステートメントを使用します。

package.json：

npm run build >>> webpack --config webpack.config.js --display-error-details --colors --progress

npm run test >>> karma start --single-run --no-auto-watch karma.config.js

{
  "name": "ProblemDemo",
  "scripts": {
    "build": "rimraf dist && webpack --config webpack.config.js --display-error-details --colors --progress",
    "test": "karma start --single-run --no-auto-watch karma.config.js"
  },
  "dependencies": {
    "angular": "^1.5.7",
    "angular-filter": "^0.5.8"
  },
  "devDependencies": {
      "webpack": "1.13.1",
      "html-loader": "0.4.3",
      "babel-loader": "5.3.2",
      "html-webpack-plugin": "1.6.1",
      "rimraf": "^2.5.3",
      "run-sequence": "1.1.2",
      "jasmine-core": "^2.4.1",
      "karma": "^0.13.19",
      "karma-chrome-launcher": "^0.2.2",
      "karma-coverage": "^0.5.3",
      "karma-jasmine": "^0.3.6",
      "karma-webpack": "^1.7.0",
      "loader-utils": "^0.2.12"
  }
}

karma.config.js：

module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        coverageReporter: {
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'lcovonly', subdir: '.' }
            ]
        },
        files: ['./tests.webpack.js'],
        frameworks: ['jasmine'],
        preprocessors: { './tests.webpack.js': ['webpack'] },
        reporters: ['progress', 'coverage'],
        webpack: configureWebpack()
    });

    function configureWebpack(webpackConfigFunction) {
        var webpackConfig = require('./webpack.config');
        webpackConfig.entry = undefined; // karma will pass the proper argument for entry
        return webpackConfig;
    }
};

ご覧のとおり、私はkarma-babelプラグインを使用していません。import/ requireステートメントを含むコードのビルドが既に動作しているので、なぜそれらが必要なのかわかりません。

test_entry.js：

var testsContext = require.context('./test', true, /\.js$/);
testsContext.keys().forEach(testsContext);

var srcContext = require.context('./app', true, /\.js$/);
srcContext.keys().forEach(srcContext);

Webpackビルドは問題なく成功します（予想されるファイルサイズのtest_entry.jsチャンクを出力します）が、KarmaはChromeとすぐに開きますページが読み込まれると、次のエラーが表示されます。

Chrome 51.0.2704（Windows 7 0.0.0）エラー

Uncaught SyntaxError：予期しないトークンのインポート

the_path/test_entry.js：41で

test_entry.jsには41行がなく、importステートメントが含まれていません。何が悪いの？

Webpackの設定も知りたい場合：

// webpack.config.js, works perfectly for normal builds but not with Karma
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
        debug: true,
        entry: {
                app: ['./app/index.js'],
                vendor: ['./app/vendor.js']
        },
        output: {
                path: path.join(__dirname, 'dist'),
                filename: 'js/[name].js'
        },
        plugins: [
                new HtmlWebpackPlugin({
                        template: './app/index.html',
                        inject: 'body',
                        minify: false
                }),
                new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js'),
                new webpack.SourceMapDevToolPlugin({
                        filename: '[file].map',
                        exclude: /vendor/
                })
        ],
        resolve: {
                extensions: ['', '.js'],
                alias: {
                        app: path.join(__dirname, 'app')
                }
        },
        module: {
                loaders: [
                        {
                                test: /\.js$/,
                                loader: 'babel-loader',
                                include: path.join(__dirname, 'app'),
                                exclude: path.join(__dirname, 'node_modules')
                        },
                        {
                                test: /\.html$/,
                                loader: 'html-loader'
                        }
                ]
        },
        resolveLoader: {
                root: path.join(__dirname, 'node_modules')
        },
};

test_entry.jsで必要なテストを表示したい場合、実行できません：

import jasmine from 'jasmine-core';
import readableNumberFilter from './file_path/readableNumber.filter';

// for some reason needed, or else unexpected token errors during build:
var describe = jasmine.describe;
var it = jasmine.it;
var expect = jasmine.expect;

describe('readableNumber Filter', function () {
        describe('readableNumber Filter formatting', () => {
                it('it should support optional arguments', function () {
                        expect(readableNumberFilter("50.3")).toEqual("50,30");
                });
        });
});

2016年7月20日編集

この問題は、更新されたbabel-loader依存関係でも継続します（es2015プリセットオプションの設定を含む）。 「babel-core」：「^ 6.11.4」、「babel-loader」：「^ 6.2.4」、「babel-preset-es2015」：「^ 6.9.0」、

javascriptecmascript-6webpackkarma-runnerbabeljs
21
Benny Bottema

問題は、テストソースをトランスコンパイルしていないことです-ファイルsrc/global/filters/dateFormat.filter.spec.jsはトランスコンパイルされていません。

このローダー構成を変更する必要があります。

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.join(__dirname, 'app'),
    exclude: path.join(__dirname, 'node_modules')
},

次のように、機能させるには：

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
        path.join(__dirname, 'app'),
        path.join(__dirname, 'test')
    ],
    exclude: path.join(__dirname, 'node_modules')
},

webpack.optimize.CommonsChunkPluginプラグインにも問題があります。karmaでは無効にする必要があります。 https://github.com/webpack/karma-webpack/issues/22

このプラグインを無効にした後、テストファイルに間違いがあります。

import jasmine from 'jasmine-core';

import readableNumberFilter from 'readableNumber.filter';

var describe = jasmine.describe;
var it = jasmine.it;
var expect = jasmine.expect;

describe('readableNumber Filter', function () {
    describe('readableNumber Filter formatting', () => {
        it('it should support optional arguments', function () {
            expect(readableNumberFilter("50.3")).toEqual("50,30");
        });
    });
});

このテストにはいくつかのエラーがあります。

  1. import jasmine from 'jasmine-core';-あなたはそれをするべきではありません（カルマはそうします、またdescribe、itおよびexpectを追加します）
  2. import readableNumberFilter from 'readableNumber.filter';-サービスをテストするためにangularサービスをインスタンス化する方法ではありません。

次のようなことを行う必要があります（このテストは、上記のすべての修正で実際に機能します）。

import angular from 'angular';
import 'angular-mocks';

import testModule from '../../../../app/src/global/index';

const { module, inject } = angular.mock;

describe('readableNumber Filter', () => {
    beforeEach(module(testModule));

    let $filter;

    beforeEach(inject((_$filter_) => {
        $filter = _$filter_;
    }));

    describe('readableNumber Filter formatting', () => {
        it('it should support optional arguments', () => {
            const result = $filter('readableNumber')("50.3");
            expect(result).toEqual("50,30");
        });
    });
});

注意：モジュールangular-mocksをインストールする必要があります。

コードカバレッジレポートをサポートするには、babel-istanbul-loaderのようなものを使用するようにwebpack構成をテストするように構成する必要があります。ところで、Babel6にアップグレードする必要もあります。

また、webpackの構成をより構成しやすくする必要があります（テスト用と本番用の構成は少し異なります）。

これらすべての修正を含むプルリクエストを送信しました： https://github.com/bbottema/webpack-angular15-es6-karma/pull/1

angular 1.xプロジェクトとwebpackのビルド、karmaを介したコードカバレッジのテストを含む-多分あなたは私のプロジェクトに興味があるでしょう： https://github.com/zxbodya/ angular-webpack-seed -必要なすべての構成を備えたスターターテンプレートです。

33
Bogdan Savluk