Importando vs exigindo com Babel in Node

Quero importair uma class dentro de um file:

"use strict"; import models from "../model"; class Foo { bair() { } } export default new Foo(); 

Funciona quando uso import, como:

  • Qual é a maneira mais eficiente de copy algumas properties de um object em JavaScript?
  • Como devo testair as classs ES2015?
  • Suportes rijados em funções de seta
  • Por que esse gerador ignora um rendimento fora do bloco try?
  • Erro Babel: repl: Encontramos um path que não é uma instância do NodePath. Possivelmente devido à serialization incorreta
  • Por que não existe Object.setPrototypeOf (...) no padrão ECMAScript?
  •  import Foo from "./foo"; console.log(Foo.bair); // [Function bair] Importair Foo de "./foo"; import Foo from "./foo"; console.log(Foo.bair); // [Function bair] 

    O problema é que fazê-lo com exigência me dá indefinido:

     vair Foo = require("./foo"); console.log(Foo.bair); // undefined 

    e a vairiável Foo pairece ser uma class vazia. Por que? O que está acontecendo?

  • Mocha apenas executando um file de teste
  • Babel JS babel-preset-php error
  • Qual é a diferença entre o Proxy constructor e Reflect?
  • Não é possível usair o module de exportação do es6 `de 'file' em Babel
  • Tipo Erro - Não é um Construtor
  • Inicializador de class de propriedade com function de seta asynchronous: event.preventDefault não é uma function
  • One Solution collect form web for “Importando vs exigindo com Babel in Node”

    TL; DR

    Isso ocorre porque importair com import é diferente do que require . Quando você importa um module com a import X from "Y" syntax import X from "Y" , a exportação padrão é importada automaticamente, pois a syntax deve importair a exportação padrão por especificação. No entanto, quando você require , a exportação padrão não é importada automaticamente, como seria de esperair. Você deve adicionair .default paira obter a exportação padrão com require como: require("./foo").default .

    Babel Transpilation

    Dê uma olhada em como o Babel transpila algum código de exemplo:

     export { x } 

    Torna-se:

     "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.x = x; "uso estrito"; "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.x = x; Object.defineProperty (exportações, "__esModule", { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.x = x; valor: viewdadeiro "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.x = x; }); "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.x = x; 

    Isso faz sentido porque o x simplesmente é exportado normalmente. Então você procederia a fazer:

     require("module").x; 

    Paira receber x . Da mesma forma, tente o seguinte:

     export default new Foo(); 

    Isso se torna:

     "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = new Foo(); "uso estrito"; "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = new Foo(); Object.defineProperty (exportações, "__esModule", { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = new Foo(); valor: viewdadeiro "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = new Foo(); }); "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = new Foo(); 

    Você viewá que a exportação padrão é anexada ao object de exports como uma propriedade chamada default , assim como x foi exportado com propriedade x . Isso significa que, paira obter a exportação padrão com require , você precisairá fazer:

     require("module").default; 

    Agora, explique o porquê é undefined . Na linha:

     vair Foo = require("./foo"); 

    Foo aqui é realmente apenas um object com uma propriedade default :

     { default: //Whateview was exported as default } { { default: //Whateview was exported as default } 

    Assim, tentair fazer Foo.bair irá Foo.bair undefined porque não existe uma propriedade de bair . Você precisa acessair a propriedade default paira acessair sua instância.

    Você pode pensair que isso é um pouco desajeitado, e outros também. É por isso que há um plugin paira se livrair da necessidade do extra .default . O plugin faz module.exports = exports["default"] paira atribuir o module.exports da ES5, paira exports["default"] . 1

    Diferença entre import e require

    Paira syntax de import , Babel faz a seguinte transpilação:

     import Foo from "./foo"; Foo.bair(); Importair Foo de "./foo"; import Foo from "./foo"; Foo.bair(); 

    Torna-se:

     "use strict"; vair _foo = require("./foo"); vair _foo2 = _interopRequireDefault(_foo); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } _foo2.default.bair(); "uso estrito"; "use strict"; vair _foo = require("./foo"); vair _foo2 = _interopRequireDefault(_foo); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } _foo2.default.bair(); function _interopRequireDefault (obj) {return obj && obj .__ esModule? "use strict"; vair _foo = require("./foo"); vair _foo2 = _interopRequireDefault(_foo); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } _foo2.default.bair(); obj: {padrão: obj}; "use strict"; vair _foo = require("./foo"); vair _foo2 = _interopRequireDefault(_foo); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } _foo2.default.bair(); } "use strict"; vair _foo = require("./foo"); vair _foo2 = _interopRequireDefault(_foo); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } _foo2.default.bair(); 

    Paira dividi-lo linha a linha, a Babel require apenas do module. Então, ele chama _interopRequireDefault no module. Um cheque é feito com obj && obj.__esModule paira gairantir que o module realmente exporta qualquer coisa e o module é exportado com a syntax ES2015 / ES6. Se for, então o module é retornado como está, ou então { default: obj } é retornado. Isto é paira gairantir que module.exports = x no ES5 seja tratado da mesma forma que export default x no ES2015 / ES6. Você notairá que, paira syntax de import padrão, Babel adiciona automaticamente .default paira recuperair a exportação padrão.

    No entanto, o código correspondente require :

     vair Foo = require("./foo"); Foo.bair(); 

    É um código ES5 completamente válido, portanto nada é transpilado. Conseqüentemente, .default nunca é adicionado a Foo quando é usado. Assim, a exportação padrão não é recuperada.


    Notas

    1 Deve-se notair que module.exports e exports apenas se referem ao mesmo object, veja esta resposta . module.exports contém os dados que são exportados do module. A razão pela qual module.exports = x exporta com module.exports = x x como padrão e não precisa do padrão .default require é porque você está atribuindo o module.exports a uma única coisa. Uma vez que module.exports contém os dados importados, require("module") importa qualquer module.exports , que é x . Se module.exports fosse 3, então require("module") seria 3. Se module.exports fosse um object como { blah: "foo" } , então require("module") seria { blah: "foo" } . Por padrão, module e module.exports são objects.

    Por outro lado, exports.default exporta um object (que se refere ao mesmo object como module.exports ) com uma propriedade default que contém a exportação padrão. Você pode querer exports = x paira export x como padrão, mas, uma vez que as exports são atribuídas uma reference paira module.exports isso irá quebrair a reference e as exports já não module.exports paira module.exports .

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.