Как правильно использовать экспорт ES6 по умолчанию с требованием CommonJS?

Я работал с руководством по Webpack. В одном из разделов он дает пример кода, который содержит одну строку сути этого вопроса:

export default class Button { /* class code here */ }

В следующем разделе указанного руководства под названием «Разделение кода» класс, определенный выше, загружается по запросу, например:

require.ensure([], () => {
    const Button = require("./Components/Button");
    const button = new Button("google.com");
    // ...
});

К сожалению, этот код выдает исключение:

Uncaught TypeError: Button is not a function

Теперь я знаю, что правильный способ включить модуль ES6 — это просто import Button from './Components/Button'; в верхней части файла, но использование подобной конструкции в любом другом месте файла превращает Babel в грустную панду:

SyntaxError: index.js: 'import' and 'export' may only appear at the top level

Немного повозившись с предыдущим (require.ensure()) примером выше, я понял, что синтаксис ES6 export default экспортирует объект со свойством default, который содержит мой код (функция Button).

Я исправил пример неработающего кода, добавив .default после вызова require, например:

const Button = require("./Components/Button").default;

... но я думаю, что это выглядит немного неуклюже и подвержено ошибкам (мне нужно знать, какой модуль использует синтаксис ES6, а какой использует старый добрый module.exports).

Это подводит меня к вопросу: как правильно импортировать код ES6 из кода, использующего синтаксис CommonJS?


webpack javascript ecmascript-6 commonjs es6-module-loader
person mr.b    schedule 13.03.2016    source источник

Ответы (2)


arrow_upward
27
arrow_downward

Чтобы использовать export default с Babel, вы можете сделать 1 из следующих действий:

  1. require("myStuff").default
  2. npm install babel-plugin-add-module-exports --save-dev

Or 3:

//myStuff.js
var thingToExport = {};
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = thingToExport;
person Cooper Buckingham    schedule 13.03.2016
comment
Самый быстрый способ узнать все подробности — использовать babel-cli для транспиляции одного файла и посмотреть, что получится в результате. Просто нужна вещь defineProperty... - так что спасибо, что указали на все это - person Sebastian Rothbucher; 10.04.2018

arrow_upward
-1
arrow_downward

Если кто-то использует gulp + browserify + babelify для связывания js с использованием в клиентской части.

Попробуйте следующий код [gulpfile.js]:

browserify({
  entries: "./ui/qiyun-ui/javascripts/qiyun-ui.src.js",
  standalone: "qyUI" // To UMD
})
.transform(babelify, {
  presets: ["env"],
  plugins: ["add-module-exports"] // export default {} => module.exports = exports['default'];
})
.bundle()

Не забудьте установить этот пакет: https://www.npmjs.com/package/babel-plugin-add-module-exports

person sknight    schedule 09.01.2018