Node.js kullanmak için ES6 içe / dışa aktarma gerekir

Üzerinde çalıştığım bir projede, hangi modül sistemini kullanabileceğimiz konusunda iki seçeneğimiz var:

1. Kullanarak modülleri İçe requireve kullanma ihracat module.exportsve exports.foo.
2. ES6 kullanarak modülleri içe aktarma importve ES6 kullanarak dışa aktarmaexport

Birini diğerinin üzerinde kullanmanın herhangi bir performans avantajı var mı? Düğüm modülleri üzerinde ES6 modülleri kullanıp kullanmayacağımızı bilmemiz gereken başka bir şey var mı?

Birini diğerinin üzerinde kullanmanın herhangi bir performans avantajı var mı?

ES6 modüllerini yerel olarak destekleyen henüz JavaScript motoru bulunmadığını unutmayın. Kendinize Babil kullandığınızı söylediniz. Babel zaten varsayılan olarak CommonJS'ye ( / ) dönüştürür importve exportbildirir . Bu nedenle, ES6 modülü sözdizimini kullansanız bile, kodu Düğümde çalıştırırsanız kaputun altında CommonJS kullanacaksınız.requiremodule.exports

CommonJS ve ES6 modülleri arasında teknik farklılıklar vardır, örneğin CommonJS modülleri dinamik olarak yüklemenize izin verir. ES6 buna izin vermiyor, ancak bunun için geliştirilmekte olan bir API var .

ES6 modülleri standardın bir parçası olduğu için onları kullanırım.

Dikkate almak isteyebileceğiniz birkaç kullanım / özellik vardır:

gerektir:

• Yüklenen modül adının önceden tanımlanmadığı / statik olmadığı veya yalnızca "gerçekten gerekli" olması durumunda (belirli kod akışına bağlı olarak) şartlı olarak yüklediğiniz dinamik yüklemeye sahip olabilirsiniz.
• Yükleme senkronize. Bu, birden fazla requires'niz varsa, bunların tek tek yüklenip işlendiği anlamına gelir .

ES6 İthalatı:

• Yalnızca ihtiyacınız olan parçaları seçmeli olarak yüklemek için adlandırılmış içe aktarımları kullanabilirsiniz. Bu hafızadan tasarruf edebilir.
• İçe aktarma eşzamansız olabilir (ve mevcut ES6 Modül Yükleyicide aslında) ve biraz daha iyi performans gösterebilir.

Ayrıca, Modül gerektir sistemi standart tabanlı değildir. ES6 modülleri mevcut olduğunda standart hale gelme olasılığı düşüktür. Gelecekte, performans açısından avantajlı olacak çeşitli uygulamalarda ES6 Modülleri için yerel destek olacaktır.

Ana avantajları sözdizimidir:

• Daha bildirimsel / kompakt sözdizimi
• ES6 modülleri temel olarak UMD'yi (Evrensel Modül Tanımı) geçersiz kılacaktır - esas olarak CommonJS ve AMD (sunucuya karşı tarayıcı) arasındaki şemayı kaldırır.

ES6 modülleri ile herhangi bir performans avantajı görmeniz olası değildir. Tarayıcıda ES6 özellikleri için tam destek olsa bile, modülleri paketlemek için ekstra bir kütüphaneye ihtiyacınız olacaktır.

Birini diğerinin üzerinde kullanmanın herhangi bir performans avantajı var mı?

Mevcut yanıt import/exporthayırdır , çünkü mevcut tarayıcı motorlarının hiçbiri ES6 standardından uygulanmaz .

Bazı karşılaştırma çizelgeleri http://kangax.github.io/compat-table/es6/ bunu dikkate almaz, bu nedenle Chrome için neredeyse tüm yeşillikleri gördüğünüzde dikkatli olun. importES6 anahtar kelimesi dikkate alınmadı.

Başka bir deyişle, V8 dahil mevcut tarayıcı motorları alamıyor yeni bir JavaScript dosyası gelen ana JavaScript dosyası herhangi bir JavaScript yönergesi üzerinden.

( V8 ES6 şartnamesine göre bunu uygulayana kadar hala birkaç hata uzakta veya yıllarca uzakta olabiliriz.)

Bu belge ihtiyacımız olan şey ve bu belge de uymamız gereken şey.

Ve ES6 standardı, modülü (başlık) .hdosyalarımız olduğu C programlama dilinde olduğu gibi modülü okumadan önce modül bağımlılıklarının orada olması gerektiğini söyledi .

Bu iyi ve iyi test edilmiş bir yapı ve eminim ki ES6 standardını yaratan uzmanlar bunu akılda tuttular.

Bu, Webpack veya diğer paket paketleyicilerin bazı özel durumlarda paketi optimize etmesini ve paketten gerekli olmayan bazı bağımlılıkları azaltmasını sağlar. Ancak mükemmel bağımlılıklarımız olduğunda, bu asla olmayacak.

import/exportYerel desteğin yayına girmesi biraz zaman requirealacak ve anahtar kelime uzun süre hiçbir yere gitmeyecek.

Nedir require?

node.jsModülleri yüklemenin yolu budur . ( https://github.com/nodejs/node )

Düğüm, dosyaları okumak için sistem düzeyinde yöntemler kullanır. Kullanırken temelde buna güveniyorsunuz require. JavaScript dosyasını / modülünü yüklemek için (son sisteme, Linux, Mac, Windows'a bağlı olarak) requiregibi bazı sistem çağrılarında uv_fs_opensona erecektir.

Bunun doğru olup olmadığını kontrol etmek için Babel.js'yi kullanmayı deneyin ve importanahtar kelimenin dönüştürüleceğini göreceksiniz require.

ES6 modüllerini kullanmak 'ağaç sallamak' için yararlı olabilir; yani, Webpack 2, Toplama (veya diğer paketleyicilerin) kullanılmayan / içe aktarılmayan kod yollarını tanımlamasını ve dolayısıyla sonuçta ortaya çıkan paketin içine girmemesini sağlamak. Bu, asla ihtiyacınız olmayacak kodu ortadan kaldırarak dosya boyutunu önemli ölçüde azaltabilir, ancak Webpack ve diğerlerinin gerekli olup olmadığını bilmenin bir yolu olmadığından, CommonJS ile varsayılan olarak paketlenmiştir.

Bu, kod yolunun statik analizi kullanılarak yapılır.

Örneğin, şunu kullanarak:

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

... paketleyiciye package.anotherPartgerekli olmayan bir ipucu verir (içe aktarılmadıysa, kullanılamaz - değil mi?), bu yüzden paketlemeyi rahatsız etmez.

Webpack 2 için bunu etkinleştirmek için, transpilerinizin CommonJS modüllerini tükürmediğinden emin olmanız gerekir. Eğer kullanıyorsanız es2015eklentiyi babel ile, kendi içinde devre dışı bırakabilirsiniz .babelrcşöyle:

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

Toplama ve diğerleri farklı çalışabilir - ilgileniyorsanız dokümanları görüntüleyin.

Zaman uyumsuz veya belki de tembel yükleme söz konusu olduğunda import (), çok daha güçlüdür. importBileşene eşzamansız olarak ne zaman ihtiyaç duyduğumuza bakın, daha sonra constdeğişken kullanımdaki gibi bazı eşzamansız bir şekilde kullanırız await.

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

Veya o zaman kullanmak istiyorsanız require(),

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

Şey import()aslında doğada zaman uyumsuzdur. İçinde neehar Venugopal tarafından belirtildiği gibi ReactConf , istemci tarafı mimarisi için bileşenleri tepki olarak yüke için kullanabilirsiniz.

Yönlendirme söz konusu olduğunda da çok daha iyi. Bu, kullanıcı belirli bir web sitesine kendi özel bileşenine bağlandığında ağ günlüğünü gerekli bir parçayı indirmesini sağlayan özel bir şeydir. örneğin, kontrol panelinden önceki giriş sayfası, kontrol panelinin tüm bileşenlerini indirmez. Geçerli olan yani oturum açma bileşeni gerekli olduğundan, bu sadece indirilecektir.

exportŞunun için de geçerlidir : ES6 export, CommonJS ile tamamen aynıdır module.exports.

NOT - Eğer bir node.js projesi geliştiriyorsanız, kesinlikle kullanacağınız require()gibi düğümün istisna hatası atacağı için invalid token 'import'kullanmanız gerekir import. Bu nedenle düğüm, içe aktarma ifadelerini desteklemez.

GÜNCELLEME - Dan Dascalescu tarafından önerildiği gibi : v8.5.0'dan (Eylül 2017'de piyasaya sürüldüğünden), Babel olmadan node --experimental-modules index.mjskullanmanıza izin veriyor import. Ayrıca , npm paketlerinizi eski ES6 modülü olarak eski requireyöntemle geriye dönük uyumlulukla yayınlayabilir (ve göndermelisiniz) .

Eşzamansız ithalatların nerede kullanılacağı hakkında daha fazla bilgi için buna bakın - https://www.youtube.com/watch?v=bb6RCrDaxhw

Bilmeniz gereken en önemli şey, ES6 modüllerinin gerçekten resmi bir standart olmasına rağmen CommonJS (Node.js) modülleri değildir.

2019'da ES6 modülleri tarayıcıların % 84'ü tarafından destekleniyor . Node.js onları - deneysel modüller bayrağının arkasına koyarken , esm adında , tümleştirmeyi kolaylaştıran kullanışlı bir düğüm paketi de vardır .

Bu modül sistemleri arasında karşılaşabileceğiniz bir diğer sorun da kod konumudur. node_modulesÇoğu ES6 modülü düz bir dizin yapısında konuşlandırılırken, Node.js kaynağın bir dizinde tutulduğunu varsayar . Bunların mutabakatı kolay değildir, ancak package.jsonyükleme öncesi ve sonrası komut dosyalarıyla dosyanızı hackleyerek yapılabilir . Örnek bir izomorfik modül ve nasıl çalıştığını açıklayan bir makale .

Şahsen import kullanıyorum çünkü gerekli yöntemleri, üyeleri import kullanarak içe aktarabiliriz.

import {foo, bar} from "dep";

Dosya Adı : dep.js

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

Kredi Paul Shan'a gidiyor. Daha fazla bilgi .

Şu anda ES6 ithalatı itibariyle, ihracat her zaman CommonJS'ye derlenmektedir , bu nedenle birini veya diğerini kullanmanın bir faydası yoktur . ES6 kullanımı önerilmesine rağmen, tarayıcılardan yerel destek verildiğinde avantajlı olması gerekir. Nedeni, bir dosyadan kısmi alabilirsiniz iken CommonJS ile tüm dosya gerekir.

ES6 → import, export default, export

CommonJS → require, module.exports, exports.foo

Bunların ortak kullanımı aşağıdadır.

ES6 dışa aktarma varsayılanı

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

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

ES6 çoklu gönderme ve çoklu alma

// 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

CommonJS module.exports

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

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

CommonJS module.exports çoklu

// 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

Neden (muhtemelen optimizasyon - tembel yükleme?) Emin değilim, ama importithal modüller kullanılmazsa kodu ayrıştırmayan fark ettim .
Bazı durumlarda beklenen davranış bu olmayabilir.

Örnek bağımlılığımız olarak nefret edilen Foo sınıfını ele alalım.

foo.ts

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

Örneğin:

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ğer yandan:

index.ts

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