Babel 6 изменяет способ экспорта по умолчанию

Question

Прежде, 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"]; 

выход с Вавилонской 6 (и es2015 плагин):

"use strict"; 

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

Обратите внимание, что только разница в t он выводит module.exports = exports["default"].

---

Редактировать

Вы можете быть заинтересованы в этом BlogPost я написал после того, как решить мой конкретный вопрос: Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution

Answer 1

Вы также можете использовать this plugin, чтобы вернуть прежнее поведение export.

Answer 2

Если вы хотите поведение экспорта 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} 

Answer 3

Для авторов библиотеки вы можете обойти эту проблему.

У меня обычно есть точка входа, index.js, которая является файлом, на который я указываю основное поле в package.json. Он не делает ничего, кроме реэкспорта фактической точки входа Lib:

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

Чтобы обойти эту проблему Бабеля, я изменил это на import заявления, а затем назначить по умолчанию на module.exports:

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

Все мои другие файлы остаются чистыми модулями ES6 без каких-либо обходных решений. Таким образом, только точка входа нуждается в изменении немного :)

Это будет работать для commonjs, а также для импорта ES6, потому что babel, похоже, не сбросил обратный interop (commonjs -> es6). Бабель впрыскивает следующую функцию, чтобы залатать CommonJS:

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

Я проводил часы борьбы, поэтому я надеюсь, что это спасает кого-то усилие!

Answer 4

У меня был такой выпуск. И это мое решение:

//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);