Babel 6改变了它导出默认值的方式

在此之前，babel会添加module.exports = exports["default"]行。它不再这样做了。这意味着，在我能做到

var foo = require('./foo');
// use foo

现在我必须这样做:

var foo = require('./foo').default;
// use foo

没什么大不了的(我猜这就是它一直以来应该有的样子)。 问题是我有很多代码依赖于以前的工作方式(我可以将大部分代码转换为ES6导入，但不能全部转换)。有没有人能给我一些建议，告诉我如何让旧的方式工作，而不必通过我的项目和修复这个(甚至是一些关于如何写一个代码模块来做到这一点的指导将是非常巧妙的)

谢谢!

例子:

输入:

const foo = {}
export default foo

输出Babel 5

"use strict";


Object.defineProperty(exports, "__esModule", {
value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

输出Babel 6(和es2015插件):

"use strict";


Object.defineProperty(exports, "__esModule", {
value: true
});
var foo = {};
exports["default"] = foo;

注意，输出中的唯一区别是module.exports = exports["default"]。

编辑

你可能会对我在解决我的具体问题后写的这篇博客感兴趣:误解ES6模块，升级通天塔，眼泪，和一个解决方案

79375 次浏览
小开

如果你想要CommonJS的导出行为，你需要直接使用CommonJS(或者在其他答案中使用插件)。这种行为被删除了，因为它会引起混乱，并导致无效的ES6语义，这是一些人所依赖的。

export default {
a: 'foo'
};

然后

import {a} from './foo';

这是无效的ES6，但由于你所描述的CommonJS互操作性行为。不幸的是，同时支持这两种情况是不可能的，并且允许人们编写无效的ES6是一个比让你做.default更糟糕的问题。

另一个问题是，如果用户将来添加了命名导出，可能会出现意外情况

export default 4;

然后

require('./mod');
// 4

但

export default 4;
export var foo = 5;

然后

require('./mod')
// {'default': 4, foo: 5}
小开

对于库作者，您可能能够解决这个问题。

我通常有一个入口点，index.js，这是我从package.json的主字段中指向的文件。除了重新导出库的实际入口点外，它什么也不做:

export { default } from "./components/MyComponent";

为了解决巴别塔问题，我将其更改为import语句，然后将默认值赋给module.exports:

import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

我的所有其他文件都是纯ES6模块，没有变通方法。所以只有入口点需要稍微改变:)

这将适用于commonjs的要求，也适用于ES6的导入，因为babel似乎没有放弃反向互操作(commonjs -> ES6)。Babel注入以下函数来修补commonjs:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

我已经花了几个小时来解决这个问题，所以我希望这可以为其他人节省精力!

小开
最佳答案

你也可以使用这个插件来获取旧的export行为。

小开

我就遇到过这样的问题。这是我的解决方案:

/ / src / arithmetic.js

export var operations = {
add: function (a, b) {
return a + b;
},


subtract: function (a, b) {
return a - b;
}
};

/ / src / main.js

import { operations }  from './arithmetic';


let result = operations.add(1, 1);


console.log(result);

提交答案