pattern - javascript export multiple functions

¿Cómo utilizar correctamente el "valor predeterminado de exportación" de ES6 con CommonJS "require"?

Question

He estado trabajando a través del tutorial Webpack . En una de las secciones, da el ejemplo de código que contiene una línea de esencia a esta pregunta:

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

En la siguiente sección de dicho tutorial, titulado "División de código", la clase definida anteriormente se carga a pedido, así:

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

Desafortunadamente, este código lanza una excepción:

Uncaught TypeError: Button is not a function

Ahora, sé que la forma correcta de incluir el módulo ES6 sería simplemente import Button from ''./Components/Button''; en la parte superior del archivo, pero usar una construcción como esa en cualquier otro lugar del archivo hace de babel un panda triste:

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

Después de algunos problemas con el ejemplo anterior ( require.ensure() ) anterior, me di cuenta de que export default sintaxis de exportación export default ES6 exporta un objeto que tiene una propiedad llamada default , que contiene mi código (la función Button ).

.default ejemplo de código roto agregando .default después de require call, como esto:

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

... pero creo que se ve un poco torpe y es propenso a errores (tendría que saber qué módulo usa la sintaxis ES6 y cuál usa el viejo module.exports ).

Lo que me lleva a mi pregunta: ¿cuál es la forma correcta de importar código ES6 desde el código que usa la sintaxis CommonJS?

Answer 1

Para usar la export default con Babel, puede hacer una de las siguientes acciones:

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

O 3:

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

Answer 2

Si alguien usa gulp + browserify + babelify para agrupar js usando en cliente-fin.

Intente seguir el código [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()

No olvide instalar este paquete: https://www.npmjs.com/package/babel-plugin-add-module-exports