Ecmascript 6 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

巴别塔5的输出

"use strict";

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

使用Babel 6（和es2015插件）的输出：

请注意，输出中唯一的区别是

module.exports=exports[“default”]

---

编辑

---

你可能会对我在解决我的具体问题后写的这篇博文感兴趣：

如果你想要CommonJS导出行为，你需要直接使用CommonJS（或者使用其他答案中的插件）。删除此行为是因为它会导致混淆并导致无效的ES6语义，有些人依赖于此，例如

export default {
  a: 'foo'
};

然后

import {a} from './foo';

这是无效的ES6，但由于您所描述的CommonJS互操作性行为而起作用。不幸的是，支持这两种情况是不可能的，允许人们编写无效的ES6比让您编写

.default

更糟糕

另一个问题是，例如，如果用户在将来添加命名导出，这对用户来说是意外的

export default 4;

然后

但是

然后

---

对于图书馆作者，您可能能够解决这个问题

我通常有一个入口点，

index.js

，它是我从

package.json

中的主字段指向的文件。它只会重新导出库的实际入口点：

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

为了解决babel问题，我将其更改为

import

语句，然后将默认值分配给

模块。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 }; } 

---

我已经花了好几个小时与之斗争，所以我希望这可以节省其他人的努力

您还可以使用来恢复旧的

导出行为。
我遇到过这样的问题。这是我的解决方案：

//src/算术.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);

我很好奇，如果您在使用Babel的代码库中工作，需要
require
的情况是什么？可能还有其他方法可以让你避免这种情况。我正在利用Webpack的一个功能，如果在死代码中找到它，它将不需要代码，比如：
if（false）{require（'./foo'）}
使用webpack会跳过在结果包中实际包含
foo.js
。在那里您的
false
切换结果是什么？如果这是一个在你的网页配置中可用的条件，可能还有另一个选项。在我找到这篇文章之前，这个选项让我几个小时都有问题。最后我用
module.exports={foo，bar}
替换了我所有的
exportdefault{foo，bar}
。我很喜欢现在不受支持的不正确的方法。@loganfsmyth它非常有用，可以在不重复代码的情况下传递整个模块。看一看这个要点我同意你（并注意到）之前的行为是不正确的，但我的问题是如何回避这个问题。我严重依赖于不正确的行为（直到今天早上才意识到这是不正确的）。我宁愿不必一次更新所有内容…获得当前行为的唯一修复方法是将代码切换为直接使用CommonJS，或者在您有时间更新之前一直使用Babel 5。@我们可以编写一个网页包加载程序来保持此功能（或一个Babel插件）。我很惊讶他们没有提供一个（或者更大力地宣传变化！）我对此感到困惑。。。如果我在模块A中导出默认函数（）{}

，然后在模块B中从“A”中导入A，使用Babel6

A

将是

{default:function（）{}

。。。据我所知，这应该是可行的，我应该在B中得到导出的函数，而不是对象。@mamapitufo应该是可行的，但是如果没有一个例子，很难说出什么问题。如果你想聊天的话，可以在Slack上访问Babel的支持频道。我知道有人迟早会为你写一个插件。谢谢遗憾的是，babel插件添加模块导出不支持amd风格的模块（目前），我在我的项目中使用了解决这个问题的方法，我认为使用UMD和这个插件是可行的！谢谢你的帮助。由于某种原因，我对

module.exports

和

exportdefault

之类的东西从来没有正确的想法。现在我们回到原点了？@windmaomao你是什么意思？这是一个技巧，这样commonjs用户就不必

要求（“任何”）。默认值为
。如果你不是图书馆的作者，这可能无关紧要
import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

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

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

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

import { operations }  from './arithmetic';

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

console.log(result);