使用ES6和let / const与导出/导入和Karma / webpack - 导出在顶部

时间:2017-08-24 14:48:50

标签: javascript webpack ecmascript-6 karma-mocha karma-webpack

export { test };

const test = (str) => {
    return str;
};

import { test } from './func';

describe('func', () => {
    describe('func', () => {
        it('should return the same string', () => {
            expect(test('hello world')).to.equal('hello world');
        });
    });
});
我想,

测试功能是因为提升而未定义的。 因为如果我这样做:

const test = (str) => {
    return str;
};

export { test };

测试工作。

但是,我想将我的导出保留在文件的顶部以便于参考。

有任何方法可以实现这一目标吗?

我的karma.conf.js:

const webpackConfig = require('./webpack.config');
const fileGlob = 'src/**/*.test.js';

module.exports = (config) => {
    config.set({
        basePath: '',
        frameworks: ['mocha', 'chai'],
        files: [fileGlob],
        preprocessors: {
            [fileGlob]: ['webpack']
        },
        webpack: webpackConfig,
        webpackMiddleware: {noInfo: true},
        reporters: ['progress', 'mocha'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['Firefox'],
        singleRun: true,
        concurrency: Infinity,
    });
};

package.json的相关部分:

"devDependencies": {
    "webpack": "^3.5.5",

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.24.1",

    "chai": "^4.1.1",
    "mocha": "^3.5.0",
    "karma": "^1.7.0",
    "karma-chai": "^0.1.0",
    "karma-mocha": "^1.3.0",

    "karma-webpack": "^2.0.4",

  },

1 个答案:

答案 0 :(得分:4)

ES模块导入反映了模块导出的状态。即使var express = require('express'); var app = express(); var server = app.listen(8810); var io = require('socket.io').listen(server); decaration未被提升,但在评估const时它处于暂时死区,但是当导入模块时,导出已反映export { test }实际值。

问题可能是由模块转换导致的错误行为引起的。 Babel doesn't implement module exports correctly,这会导致test导出。

可以看到here(在支持ES模块的浏览器中可用,即最新的Chrome),模块导出可以按原样使用。

TypeScript handles exports as intended也是。

要使代码与现有实现兼容,它应该是:

undefined

或者:

export const test = (str) => {
    return str;
};

两者都是传统的出口方式,特别是因为这个问题。模块末尾的导出符合使用CommonJS模块所产生的编码习惯。