Babel 6改变了它如何导出默认值
之前,babel会添加line module.exports = exports["default"]
。 它不再这样做。 这是什么意思是我可以做之前:
var foo = require('./foo'); // use foo
现在我必须这样做:
var foo = require('./foo').default; // use foo
不是一个巨大的交易(我猜这是它应该一直以来)。 问题是,我有很多代码依赖于以前的工作方式(我可以将其大部分转换为ES6import,但不是全部)。 任何人都可以给我提示,如何使旧的方式工作,而不必通过我的项目,并解决这个问题(甚至一些如何编写codemod做这个指令将是非常光滑的指令)。
谢谢!
例:
input:
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模块,升级Babel,眼泪和解决scheme
你也可以使用这个插件来取回旧的export
行为。
如果你想要CommonJS导出行为,你需要直接使用CommonJS(或者在其他答案中使用插件)。 这种行为被删除,因为它造成了混乱,并导致ES6语义无效,有些人依靠,例如
export default { a: 'foo' };
接着
import {a} from './foo';
这是无效的ES6,但工作,因为你所描述的CommonJS互操作性行为。 不幸的是,支持这两种情况是不可能的,并且允许人们编写无效的ES6是一个更糟的问题,而不是让你做。
另一个问题是,如果用户未来添加了一个命名的导出,这对用户而言是意外的
export default 4;
然后
require('./mod'); // 4
但
export default 4; export var foo = 5;
然后
require('./mod') // {'default': 4, foo: 5}
对于图书馆作者,你可能能够解决这个问题。
我通常有一个入口点index.js
,这是我从package.json
的main字段指向的文件。 除了重新导出lib的实际入口点外,
export { default } from "./components/MyComponent";
要解决babel问题,我将其更改为import
语句,然后将默认值分配给module.exports
:
import MyComponent from "./components/MyComponent"; module.exports = MyComponent;
我所有的其他文件保持纯ES6模块,没有解决方法。 所以只有入口点需要改变一点:)
这将工作commonjs要求,也为ES6import,因为巴贝尔似乎没有下降反向interop(commonjs – > ES6)。 Babel注入以下函数来修补commonjs:
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
我已经花了数小时来对抗这个,所以我希望这可以节省别人的努力!
我有这样的问题。 这是我的解决scheme:
//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);