以前,babel会添加line模块。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;
注意,输出中唯一的区别是模块。Exports = Exports ["default"]。
Edit
你可能会对我在解决了我的具体问题后写的这篇博客感兴趣:误解ES6模块,升级巴别塔,眼泪和解决方案
如果你想要CommonJS的导出行为,你需要直接使用CommonJS(或者在其他答案中使用插件)。这种行为被删除了,因为它会引起混乱,并导致无效的ES6语义,这是一些人所依赖的。
export default {
a: 'foo'
};
然后
import {a} from './foo';
这是无效的ES6,但由于你所描述的CommonJS互操作性行为。不幸的是,同时支持两种情况是不可能的,并且允许人们编写无效的ES6比让你使用.default更糟糕。
另一个问题是,如果用户将来添加了命名导出,可能会出现意外情况
export default 4;
then
require('./mod');
// 4
but
export default 4;
export var foo = 5;
then
require('./mod')
// {'default': 4, foo: 5}
对于库作者,您可能能够解决这个问题。
我通常有一个入口点index.js,这是我从package.json的主字段中指向的文件。除了重新导出库的实际入口点外,它什么也不做:
export { default } from "./components/MyComponent";
为了解决babel问题,我将其更改为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 }; }
我已经花了几个小时来解决这个问题,所以我希望这可以为其他人节省精力!