Karma+Webpack(babel加载程序)+ES6”;意外的令牌导入"

Karma + Webpack (babel-loader) + ES6 "Unexpected token import"

本文关键字:意外 令牌 导入 quot babel 加载 程序 +ES6 Karma+Webpack      更新时间:2023-09-26

/edit:我将配置完全剥离到最低限度,以证明问题。我还上传了一个工作项目到GitHub,你可以结账,这样你就可以自己看了

GitHub上有问题的用例:webpack-angular 15-es6-karma(下载7z档案)

npm install
npm run build
npm run test

我知道有几个相关的问题,但世界发展如此之快,有如此多的因素/依赖关系,我无法用目前提出的解决方案来解决这个问题。

我有一个webpack配置,它可以处理我所有的源代码,效果很好。

对于测试,我重用该配置来处理加载源文件和测试文件的单个中央条目脚本。我找不到其他方法将模块从源代码导入到测试代码中进行测试。

Karma通过重用我的webpack配置构建得很好,但浏览器一打开就会报告错误

源代码使用ES6导入和webpack-request语句。

package.json:

npm运行build>>webpack--config webpack.config.js--显示错误详细信息--colors--进度

npm运行测试>>因果报应启动-单次运行-无自动观察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/request语句的代码构建。

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)错误

未捕获的SyntaxError:意外的令牌导入

位于_path/test_entry.js:41

test_entry.js没有41行,也不包含导入语句,无论如何,它们都应该得到处理。怎么了?

如果你也想知道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");
		});
	});
});


编辑20-7-2016

更新的babel加载程序依赖项(包括设置es2015预设选项)也存在问题。"babel core":"^6.11.4","babel loader":"^2 6.2.4","babel-preset-es2015":"^ 6.9.0",

问题是您没有传输测试源-文件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插件也有问题-应禁用因果报应: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';-你不应该这样做(因果报应会这样做,也会添加describeitexpect
  2. import readableNumberFilter from 'readableNumber.filter';-这不是实例化角度服务、测试它们的方法

你应该这样做(这个测试实际上适用于上面提到的所有修复):

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


为了支持代码覆盖率报告,您需要将测试webpack配置配置为使用类似babel-istanbul-loader的东西。顺便说一下,你还需要升级到Babel6。

此外,您还需要使webpack配置更加可配置(测试和生产的配置确实略有不同)。

我已经向您发送了一个包含所有这些修复程序的拉取请求:https://github.com/bbottema/webpack-angular15-es6-karma/pull/1


关于使用webpack构建angular 1.x项目,包括通过因果报应进行代码覆盖测试——也许你会对我的项目感兴趣:https://github.com/zxbodya/angular-webpack-seed-它是具有所有必需配置的入门模板。