Menggunakan Node.js membutuhkan vs. impor / ekspor ES6

Dalam sebuah proyek yang saya kolaborasi, kami memiliki dua pilihan sistem modul mana yang dapat kami gunakan:

1. Mengimpor modul menggunakan require, dan mengekspor menggunakan module.exportsdan exports.foo.
2. Mengimpor modul menggunakan ES6 import, dan mengekspor menggunakan ES6export

Apakah ada manfaat kinerja untuk menggunakan salah satunya? Apakah ada hal lain yang harus kita ketahui jika kita menggunakan modul ES6 di atas yang Node?

Apakah ada manfaat kinerja untuk menggunakan salah satunya?

Perlu diingat bahwa belum ada mesin JavaScript yang secara bawaan mendukung modul ES6. Anda mengatakan sendiri bahwa Anda menggunakan Babel. Konversi Babel importdan exportdeklarasi ke CommonJS ( require/ module.exports) secara default. Jadi, bahkan jika Anda menggunakan sintaks modul ES6, Anda akan menggunakan CommonJS di bawah tenda jika Anda menjalankan kode di Node.

Ada perbedaan teknis antara modul CommonJS dan ES6, mis. CommonJS memungkinkan Anda memuat modul secara dinamis. ES6 tidak mengizinkan ini, tetapi ada API dalam pengembangan untuk itu .

Karena modul ES6 adalah bagian dari standar, saya akan menggunakannya.

Ada beberapa penggunaan / kemampuan yang mungkin ingin Anda pertimbangkan:

Memerlukan:

• Anda dapat memiliki pemuatan dinamis di mana nama modul yang dimuat tidak ditentukan sebelumnya / statis, atau di mana Anda memuat modul hanya jika itu "benar-benar diperlukan" (tergantung pada aliran kode tertentu).
• Memuat sinkron. Itu berarti jika Anda memiliki banyak requires, mereka dimuat dan diproses satu per satu.

Impor ES6:

• Anda dapat menggunakan impor bernama untuk hanya memuat bagian yang Anda butuhkan secara selektif. Itu bisa menghemat memori.
• Impor dapat tidak sinkron (dan pada ES6 Module Loader saat ini, sebenarnya) dan dapat bekerja sedikit lebih baik.

Juga, sistem modul Require tidak berbasis standar. Sangat tidak mungkin menjadi standar sekarang karena modul ES6 ada. Di masa depan akan ada dukungan asli untuk Modul ES6 dalam berbagai implementasi yang akan menguntungkan dalam hal kinerja.

Keuntungan utama adalah sintaksis:

• Lebih banyak deklaratif / sintaksis kompak
• Modul ES6 pada dasarnya akan membuat UMD (Universal Module Definition) usang - pada dasarnya menghilangkan perpecahan antara CommonJS dan AMD (server vs browser).

Anda tidak mungkin melihat manfaat kinerja dengan modul ES6. Anda masih membutuhkan pustaka tambahan untuk menggabungkan modul-modul, bahkan ketika ada dukungan penuh untuk fitur ES6 di browser.

Apakah ada manfaat kinerja untuk menggunakan salah satunya?

Jawaban saat ini adalah tidak, karena tidak ada mesin browser saat ini yang mengimplementasikan import/export dari standar ES6.

Beberapa grafik perbandingan http://kangax.github.io/compat-table/es6/ tidak memperhitungkan ini, jadi ketika Anda melihat hampir semua hijau untuk Chrome, berhati-hatilah.importkata kunci dari ES6 belum diperhitungkan.

Dengan kata lain, mesin browser saat ini termasuk V8 tidak dapat mengimpor file JavaScript baru dari file JavaScript utama melalui arahan JavaScript apa pun.

(Kami mungkin masih beberapa bug saja atau beberapa tahun lagi hingga V8 mengimplementasikannya sesuai dengan spesifikasi ES6.)

Dokumen ini adalah yang kita butuhkan, dan dokumen ini ini yang harus kita patuhi.

Dan standar ES6 mengatakan bahwa dependensi modul harus ada sebelum kita membaca modul seperti dalam bahasa pemrograman C, di mana kita memiliki .hfile (header) .

Ini adalah struktur yang baik dan teruji, dan saya yakin para ahli yang menciptakan standar ES6 memikirkan hal itu.

Inilah yang memungkinkan Webpack atau paket bundler lain untuk mengoptimalkan bundel dalam beberapa kasus khusus , dan mengurangi beberapa dependensi dari bundel yang tidak diperlukan. Tetapi dalam kasus kita memiliki dependensi sempurna ini tidak akan pernah terjadi.

Dibutuhkan waktu hingga import/exportdukungan asli ditayangkan, dan requirekata kunci tidak akan pergi ke mana pun untuk waktu yang lama.

Apa require?

Ini adalah node.jscara memuat modul. ( https://github.com/nodejs/node )

Node menggunakan metode tingkat sistem untuk membaca file. Anda pada dasarnya mengandalkan itu ketika menggunakan require. requireakan berakhir pada beberapa panggilan sistem sepertiuv_fs_open (tergantung pada sistem akhir, Linux, Mac, Windows) untuk memuat file / modul JavaScript.

Untuk memeriksa apakah ini benar, coba gunakan Babel.js, dan Anda akan melihat bahwa importkata kunci akan dikonversi menjadi require.

Menggunakan modul ES6 dapat berguna untuk 'pengocokan pohon'; yaitu mengaktifkan Webpack 2, Rollup (atau bundler lain) untuk mengidentifikasi jalur kode yang tidak digunakan / diimpor, dan karenanya tidak membuatnya menjadi bundel yang dihasilkan. Ini secara signifikan dapat mengurangi ukuran file dengan menghilangkan kode yang tidak pernah Anda perlukan, tetapi dengan CommonJS dibundel secara default karena Webpack dkk tidak memiliki cara untuk mengetahui apakah itu diperlukan.

Ini dilakukan dengan menggunakan analisis statis dari jalur kode.

Misalnya, menggunakan:

import { somePart } 'of/a/package';

... memberikan bundler petunjuk yang package.anotherParttidak diperlukan (jika tidak diimpor, itu tidak dapat digunakan-kan?), sehingga tidak akan mengganggu bundling itu.

Untuk mengaktifkan ini untuk Webpack 2, Anda perlu memastikan bahwa transpiler Anda tidak mengeluarkan modul CommonJS. Jika Anda menggunakan es2015plug-in dengan babel, Anda dapat menonaktifkannya .babelrcseperti:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

Rollup dan lainnya dapat bekerja secara berbeda - lihat dokumen jika Anda tertarik.

Ketika datang ke async atau mungkin pemuatan malas, maka import ()jauh lebih kuat. Lihat ketika kita membutuhkan komponen dengan cara asinkron, maka kita menggunakannya importdalam beberapa cara async seperti pada constvariabel yang menggunakan await.

const module = await import('./module.js');

Atau jika Anda ingin menggunakannya require(),

const converter = require('./converter');

Masalahnya import()sebenarnya async di alam. Seperti yang disebutkan oleh neehar venugopal di ReactConf , Anda dapat menggunakannya untuk memuat komponen reaksi secara dinamis untuk arsitektur sisi klien.

Juga jauh lebih baik dalam hal Routing. Itu adalah satu hal khusus yang membuat log jaringan mengunduh bagian yang diperlukan ketika pengguna terhubung ke situs web tertentu ke komponen spesifiknya. mis. halaman login sebelum dasbor tidak akan mengunduh semua komponen dasbor. Karena yang dibutuhkan saat ini yaitu komponen login, yang hanya akan diunduh.

Hal yang sama berlaku untuk export: ES6 exportpersis sama dengan untuk CommonJS module.exports.

CATATAN - Jika Anda mengembangkan proyek node.js, maka Anda harus benar-benar menggunakan require()sebagai simpul akan membuang kesalahan pengecualian seolah- invalid token 'import'olah Anda akan menggunakan import. Jadi simpul tidak mendukung pernyataan impor.

UPDATE - Seperti yang disarankan oleh Dan Dascalescu : Sejak v8.5.0 (dirilis September 2017), node --experimental-modules index.mjsAnda dapat menggunakannya importtanpa Babel. Anda dapat (dan harus) juga mempublikasikan paket npm Anda sebagai ESModule asli, dengan kompatibilitas ke belakang untuk requirecara lama .

Lihat ini untuk izin lebih lanjut tempat menggunakan impor async - https://www.youtube.com/watch?v=bb6RCrDaxhw

Yang paling penting untuk diketahui adalah bahwa modul ES6 memang merupakan standar resmi, sedangkan modul CommonJS (Node.js) tidak.

Pada tahun 2019, modul ES6 didukung oleh 84% browser. Sementara Node.js menempatkannya di belakang flag --experimental-modules , ada juga paket simpul yang disebut esm , yang membuat integrasi menjadi mulus.

Masalah lain yang mungkin Anda temui antara sistem modul ini adalah lokasi kode. Node.js mengasumsikan sumber disimpan dalam node_modulesdirektori, sementara sebagian besar modul ES6 digunakan dalam struktur direktori datar. Ini tidak mudah untuk direkonsiliasi, tetapi dapat dilakukan dengan meretas package.jsonfile Anda dengan skrip instalasi sebelum dan sesudah. Berikut ini adalah contoh modul isomorfik dan artikel yang menjelaskan cara kerjanya.

Saya pribadi menggunakan impor karena, kita dapat mengimpor metode yang diperlukan, anggota dengan menggunakan impor.

import {foo, bar} from "dep";

Nama File : dep.js

export foo function(){};
export const bar = 22

Penghargaan untuk Paul Shan. Info lebih lanjut .

Sampai sekarang impor ES6, ekspor selalu dikompilasi ke CommonJS , sehingga tidak ada manfaat menggunakan satu atau yang lain. Meskipun penggunaan ES6 direkomendasikan karena itu harus menguntungkan ketika dukungan asli dari browser dirilis. Alasannya, Anda dapat mengimpor sebagian dari satu file sementara dengan CommonJS Anda harus meminta semua file.

ES6 → import, export default, export

CommonJS → require, module.exports, exports.foo

Di bawah ini adalah penggunaan umum dari mereka.

ES6 standar ekspor

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

ES6 ekspor banyak dan impor banyak

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

Module.exports CommonJS

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

CommonJS module.exports multiple

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

Tidak yakin mengapa (mungkin optimasi - pemuatan malas?) Apakah berfungsi seperti itu, tetapi saya perhatikan bahwa importmungkin tidak menguraikan kode jika modul yang diimpor tidak digunakan.
Perilaku yang mungkin tidak diharapkan dalam beberapa kasus.

Ambil kelas Foo yang dibenci sebagai ketergantungan sampel kami.

untuk

export default class Foo {}
console.log('Foo loaded');

Sebagai contoh:

index.ts

import Foo from './foo'
// prints nothing

index.ts

const Foo = require('./foo').default;
// prints "Foo loaded"

index.ts

(async () => {
    const FooPack = await import('./foo');
    // prints "Foo loaded"
})();

Di samping itu:

index.ts

import Foo from './foo'
typeof Foo; // any use case
// prints "Foo loaded"