javascript - Module.exports 和 es6 导入

Question

与 babel 进行 react 。我对导入和 module.exports 感到困惑。我假设 babel 在将 ES6 代码转换为 ES5 时将导入和导出分别转换为 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");

我使用babel和预设的es2015来转编译它。这给了我以下错误

Uncaught TypeError: (0 , _animals.Tiger) is not a function

但是如果我删除 module.exports = Tiger; 并将其替换为 export { Tiger }; 它工作正常。

我在这里缺少什么？

编辑:我使用 browserify 作为模块 bundler 。

Answer 1

export { Tiger }相当于 module.exports.Tiger = Tiger .

相反，module.exports = Tiger相当于 export default Tiger 。

所以当你使用module.exports = Tiger时然后尝试 import { Tiger } from './animals'您实际上是在要求 Tiger.Tiger 。