Импорт модулей .exports и es6

Реагировать с babel. У меня есть эта путаница с импортом и module.exports. Я предполагаю, что babel при преобразовании кода ES6 в ES5 преобразует импорт и экспорт в требуемый и module.exports соответственно.

Если я экспортирую функцию из одного модуля и импортирую функцию в другой модуль, код будет выполняться отлично. Но если я экспортирую функцию с помощью modules.exports и импортирую с помощью "import", ошибка выдается во время выполнения, говоря, что это не функция.

Я приготовил пример.

// Tiger.js
function Tiger() {
    function roar(terrian){
        console.log('Hey i am in ' +  terrian + ' and i am roaing');
    };
    return roar;
}

module.exports = Tiger;

// animal.js
import { Tiger } from './animals';

var animal = Tiger();
animal("jungle");

Я использовал babel с предустановленным es2015, чтобы перекомпилировать его. Это дает мне следующую ошибку:

Uncaught TypeError: (0, _animals.Tiger) не является функцией

Но если я удалю module.exports = Tiger; И заменим его на export { Tiger }; Он отлично работает.

Что мне здесь не хватает?

EDIT: Я использую browserify как модуль bundler.

Ответ 1

export { Tiger } будет эквивалентно module.exports.Tiger = Tiger.

И наоборот, module.exports = Tiger будет эквивалентен export default Tiger.

Поэтому, когда вы используете module.exports = Tiger, а затем пытаетесь import { Tiger } from './animals', вы фактически запрашиваете Tiger.Tiger.

Ответ 2

Если вы хотите импортировать:

module.exports = Tiger

Вы можете использовать следующую конструкцию:

import * as Tiger from './animals'

Тогда это будет работать.

Другой вариант - изменить экспорт, как описано @Matt Molnar, но это возможно только в том случае, если вы являетесь автором импортированного кода.

Ответ 3

Для меня я пытаюсь применить это к webpack.config.ts. Выше не работает import * as X from "./X"; Я получаю еще одну ошибку.

Module.exports с импортом es6 для webpack.config.ts в машинописном тексте

const getConfig = ( appDir: string, distDir: string, env: any, args: any ): webpack.Configuration => {
    const config: webpack.Configuration = {
        return config;
    };
};

module.exports = getConfig;