Karma、Webpack、Babel 奇怪的导入行为

Question

问题：

当我第一次导入模块时，导出的函数是未定义的。异常时定义模块。

为什么未定义！？！？

场景：

主文件

import { UserClass } from './user';
import { query, Client } from 'faunadb';
import { FaunaClass } from '../class';

console.log('init', typeof UserClass, typeof FaunaClass, typeof query);

export function initialise (client : Client) {

  return new Promise((resolve, reject) => {
    const CLASSES : (typeof FaunaClass)[] = [
      UserClass
    ];

    let count = 0;
    const total = CLASSES.length;

    console.log('classes', CLASSES);

    CLASSES.forEach(cl =>
      client.query(query.CreateClass({ name: cl.className }))
        .then(checkDone)
        .catch(reject));

    function checkDone () {
      count += 1;

      if (total === count) {
        resolve();
      }

    }

  })
    .catch(e => {
      console.log('on catch', UserClass);
      console.log(e.message);
    });

}

如您所见，此函数中有一些控制台日志。 karma start 上的输出是：

PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: 'init', 'undefined', 'undefined', 'object'

PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: 'classes', [undefined]

PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: 'on catch', function UserClass() { ... }

PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: 'undefined is not an object (evaluating 'cl.className')'

PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 1 of 1 SUCCESS (0.933 secs / 0.928 secs)

UserClass.ts:

import { FaunaClass } from '../class';

export class UserClass extends FaunaClass {

  static className = 'users';

}

** 配置文件：**

karma.conf.js

const webpackConfig = require('./webpack.config');
const webpack = require('webpack');

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon'],

    files: [
      'src/**/*.spec.ts'
    ],

    preprocessors: {
      '**/*.ts': ['webpack', 'sourcemap']
    },

    webpack: {
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
      devtool: 'inline-source-map'
    },

    // Webpack please don't spam the console when running in karma!
    webpackServer: { noInfo: true },

    reporters: ['progress'],
    colors: true,
    autoWatch: true,
    logLevel: config.LOG_INFO,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: 'Infinity'
  });
};

Webpack 配置：

var path = require('path');

module.exports = {
  entry: './handler.ts',
  target: 'node',
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loaders: ['babel-loader', 'ts-loader'],
        exclude: [/node_modules/]
      },
      { test: /\.json$/, loader: 'json-loader' },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.tsx', '.jsx']
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: 'handler.js'
  }
};

所以你可以看到 UserClass 的日志记录在开始时是未定义的，当在承诺中抛出异常时，class 被定义。

我有一种感觉，由于某种原因它在 UserClass 导出之前执行代码，这导致它在那一刻未定义。

要么是那个，要么是我的配置文件完全坏了。

Answer 1

发生这种情况的原因是循环导入循环。我只需要更改代码运行的来源。（或进口的顺序）

Karma、Webpack、Babel 奇怪的导入行为

Karma, Webpack,Babel strange import behaviour

testing

typescript

karma-mocha

karma-webpack