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

я работал через 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, который содержит мой код (

23
commonjs ecmascript-6 es6-module-loader javascript webpack

2 ответов

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

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

или 3:

//myStuff.js
var thingToExport = {};
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = thingToExport;
18

Если кто-то использует 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

-1