Antes, Babel agregaba la línea module.exports = exports["default"]
. Ya no hace esto. Lo que esto significa es antes de que pueda hacer:
var foo = require('./foo');
// use foo
Ahora tengo que hacer esto:
var foo = require('./foo').default;
// use foo
No es un gran problema (y supongo que esto es lo que debería haber sido todo el tiempo). El problema es que tengo mucho código que depende de la forma en que funcionaban las cosas (puedo convertir la mayor parte a importaciones de ES6, pero no todas). ¿Alguien puede darme consejos sobre cómo hacer que la vieja forma funcione sin tener que pasar por mi proyecto y arreglar esto (o incluso alguna instrucción sobre cómo escribir un codemod para hacer esto sería bastante ingenioso).
¡Gracias!
Ejemplo:
Entrada:
const foo = {}
export default foo
Salida con Babel 5
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];
Salida con Babel 6 (y el complemento es2015):
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var foo = {};
exports["default"] = foo;
Tenga en cuenta que la única diferencia en la salida es el module.exports = exports["default"]
.
Editar
Puede que le interese esta publicación de blog que escribí después de resolver mi problema específico: malentendidos módulos ES6, actualización de Babel, lágrimas y una solución
fuente
require
si está trabajando en una base de código que usa Babel? Lo más probable es que haya otros enfoques que le permitan evitar eso de todos modos.if (false) { require('./foo') }
con webpack omitiría realmente incluirlofoo.js
en el paquete resultante.false
palanca allí? Si es una condición que está disponible en su configuración de paquete web, puede haber otra opción.export default {foo, bar}
conmodule.exports = {foo, bar}
. Me gustó bastante el método incorrecto que ahora no es compatible.Respuestas:
También puede usar este complemento para recuperar el
export
comportamiento anterior.fuente
Si desea un comportamiento de exportación de CommonJS, deberá usar CommonJS directamente (o usar el complemento en la otra respuesta). Este comportamiento se eliminó porque causó confusión y condujo a una semántica ES6 no válida, en la que algunas personas habían confiado, por ejemplo
y entonces
que es ES6 no válido pero funcionó debido al comportamiento de interoperabilidad de CommonJS que está describiendo. Desafortunadamente, no es posible admitir ambos casos, y permitir que las personas escriban ES6 no válidas es un problema peor que obligarlo a hacerlo
.default
.El otro problema era que era inesperado para los usuarios si agregaban una exportación con nombre en el futuro, por ejemplo
luego
pero
luego
fuente
export default function () {}
en el módulo A y luegoimport a from 'a'
en el módulo B, con Babel 6a
sería{ default: function () {} }
... Por lo que puedo entender de explorejs.com/es6/... esto debería funcionar y debería exportarlo funcionan en B, no en el objeto.Para los autores de la biblioteca, puede solucionar este problema.
Por lo general, tengo un punto de entrada
index.js
, que es el archivo al que apunto desde el campo principalpackage.json
. No hace nada más que reexportar el punto de entrada real de la lib:Para solucionar el problema de babel, cambié esto a una
import
declaración y luego asigné el valor predeterminado amodule.exports
:Todos mis otros archivos permanecen como módulos ES6 puros, sin soluciones. Entonces, solo el punto de entrada necesita un cambio ligeramente :)
Esto funcionará para los requisitos de commonjs, y también para las importaciones de ES6 porque babel no parece haber eliminado la interoperabilidad inversa (commonjs -> es6). Babel inyecta la siguiente función para parchear commonjs:
¡He pasado horas luchando contra esto, así que espero que esto le ahorre el esfuerzo a otra persona!
fuente
module.exports
y esoexport default
. ¿Ahora volvemos al punto de partida?require("whatever").default
. Si no eres autor de una biblioteca, esto probablemente sea irrelevanteHe tenido ese tipo de problema. Y esta es mi solución:
//src/arithmetic.js
//src/main.js
fuente