Module.exports和es6导入

Question

与巴贝尔发生反应。我对import和module.exports感到困惑。在将ES6代码转换为ES5时，我认为babel将导入和导出分别转换为require和module.exports。

如果我从一个模块导出一个函数并在另一个模块中导入该函数，则代码执行正常。但是如果我使用module.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");

我使用预设es2015的babel进行反编译。这给了我以下错误

  

未捕获的TypeError：（0，_ animals.Tiger）不是函数

但是如果我删除了module.exports = Tiger;并将其替换为export { Tiger };它就可以了。

我在这里缺少什么？

修改 我使用browserify作为模块捆绑器。

Answer 1

export { Tiger }等同于module.exports.Tiger = Tiger。相反，module.exports = Tiger相当于export default Tiger。因此，当您使用module.exports = Tiger然后尝试import { Tiger } from './animals'时，您实际上会要求Tiger.Tiger。

Answer 2

如果您想导入：

import * as Tiger from './animals'

您可以使用以下结构：

{{1}}

然后它会起作用。

另一种选择是改变导出，如@Matt Molnar所述，但只有你是导入代码的作者才有可能。

Answer 3

对我来说，我试图将其应用于webpack.config.ts。上面的方法不起作用import * as X from "./X";我遇到另一个错误。

Module.exports with es6 import for webpack.config.ts in typescript

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

module.exports = getConfig;

Answer 4

未设置module.exports时，它指向一个空对象（{}）。当您执行module.exports = Tiger时，您在告诉运行时从该模块中导出的对象是Tiger对象（而不是默认的{}），在这种情况下，该对象是一个函数。 br /> 由于要导入相同的功能，因此导入方法是使用默认导入（import tiger from './tiger'）。否则，如果您要使用命名导入（import { tiger } from './tiger'），则必须更改module.exports对象或使用export关键字而不是module.exports对象。

默认导入/导出：

// tiger.js
module.exports = tiger;
// or
export default function tiger() { ... }

// animal.js
import tiger from './tiger';

命名的导入/导出：

// tiger.js
module.exports = { tiger };
// or
module.exports.tiger = tiger
// or
export const tiger = () => { ... }
// or
export function tiger() => { ... }

// animal.js
import { tiger } from './tiger';