Masalahnya adalah dengan
- bagaimana modul ES6 ditiru di CommonJS
- bagaimana Anda mengimpor modul
ES6 ke CommonJS
Pada saat penulisan ini, tidak ada lingkungan yang mendukung modul ES6 secara asli. Saat menggunakannya di Node.js, Anda perlu menggunakan sesuatu seperti Babel untuk mengonversi modul ke CommonJS. Tetapi bagaimana tepatnya hal itu terjadi?
Banyak orang menganggap module.exports = ...
sama dengan export default ...
dan exports.foo ...
setara dengan export const foo = ...
. Itu tidak sepenuhnya benar, atau setidaknya tidak bagaimana Babel melakukannya.
default
Ekspor ES6 sebenarnya juga bernama ekspor, kecuali itu default
adalah nama "dicadangkan" dan ada dukungan sintaksis khusus untuknya. Mari kita lihat bagaimana Babel mengkompilasi nama dan ekspor default:
// input
export const foo = 42;
export default 21;
// output
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var foo = exports.foo = 42;
exports.default = 21;
Di sini kita dapat melihat bahwa ekspor default menjadi properti pada exports
objek, sama seperti foo
.
Impor modul
Kita dapat mengimpor modul dengan dua cara: Baik menggunakan CommonJS atau menggunakan import
sintaks ES6 .
Masalah Anda: Saya yakin Anda melakukan sesuatu seperti:
var bar = require('./input');
new bar();
mengharapkan yang bar
diberi nilai ekspor standar. Tetapi seperti yang dapat kita lihat dalam contoh di atas, ekspor default ditugaskan ke default
properti!
Jadi untuk mengakses ekspor default, kita harus melakukannya
var bar = require('./input').default;
Jika kita menggunakan sintaks modul ES6, yaitu
import bar from './input';
console.log(bar);
Babel akan mengubahnya menjadi
'use strict';
var _input = require('./input');
var _input2 = _interopRequireDefault(_input);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_input2.default);
Anda dapat melihat bahwa setiap akses ke bar
dikonversi menjadi akses .default
.