ES6-modules begrijpen

vóór ES6 had Javascript modulebesturingssystemen zoals RequireJS, CommonJS en Angular ‘ s dependency injection system. Andere tools zoals Browserify en Webpack zelf hebben veel problemen in deze context opgelost.

in 2015 hadden we een eerste implementatie van het module systeem in Vanilla Javascript voor Node.js met behulp van de require weten we allemaal. Maar dit is nog niet aangekomen voor browsers.

strikte modus

voor alles moeten we een beetje praten over strikte modus., Zonder dat kunnen we absoluut niets over modules praten.

strict mode is standaard ingeschakeld wanneer we werken met ES6 modules, als je nog steeds niet weet wat strict mode is, zal ik een basis introductie geven.,ad6″>, in de aanroep van de methoden is niet langer gedwongen om een Object

Als u haven ‘ t got a clue, je wordt verondersteld om te gebruiken in de 'use strict', in de juiste plaatsen, het wordt steeds meer de standaard in ES6, het is nog steeds een goede gewoonte om iedere keer te gebruiken.,

Export

No modelo CommonJS podemos exportar valores atribuindo eles ao module.exports como no snippet abaixo:

No ES6, os módulos são arquivos que dão export uma API (basicamente igual ao CommonJS)., De declaraties, variabelen, functies en alles van die module bestaan alleen in de scopes van die module, wat betekent dat elke variabele die binnen een module is gedeclareerd niet beschikbaar is voor andere modules (tenzij ze expliciet worden geëxporteerd als onderdeel van de API, en later geïmporteerd in de module die ze gebruikt).,

Export standaard

u Kunt het simuleren van het gedrag van een CommonJS in principe, het vervangen van de module.exports met een export default:

aan De andere kant van de modules in CommonJS, de verklaringen in de export, kan alleen geplaatst worden op het hoogste niveau van je code, en niet in welk deel van het., We gaan ervan uit dat deze beperking bestaat om het leven gemakkelijker te maken voor tolken wanneer ze modules gaan identificeren, maar als we er naar kijken, is het een zeer geldige beperking, omdat er niet veel goede redenen voor ons zijn om dynamische exports te definiëren binnen onze API-functies.

een andere reden hiervoor is te vinden in het gesprek van onze goede vriend William Grasel tijdens Intercon 2017, op web app performance (die hier te vinden is).,

hij zegt dat een van de manieren om de prestaties uit te breiden is door het gebruik van modules, Dit is omdat de modules statisch gecompileerd zijn, en voordat je code zelfs naar de browser interpreter gaat (zoals V8 bijvoorbeeld). Op deze manier is het mogelijk om alleen de delen van de code die daadwerkelijk worden gebruikt in de applicatie te extraheren in plaats van de hele module te importeren, en dit zou alleen mogelijk zijn als de modules op het hoogste niveau werden gedeclareerd, omdat alles binnen een functie iets dynamisch zou worden, niet statisch.,

module.exports.foo = 'bar'

export var foo = 'bar'

export { foo as default, bar }

import 'lodash'

var _ = require('lodash')

import _ from 'lodash'

import { map, reduce } from 'lodash'

import * as _ from 'lodash'