EcamScript (ESM) It's about time !
•Als PPTX, PDF herunterladen•
2 gefällt mir•748 views
- ECMAScript Modules (ESMs) allow for the modularization of JavaScript into independent, reusable modules and aim to standardize module syntax. - ESMs are supported natively in modern browsers but require flags to be enabled. Node.js also supports ESMs with flags and a new proposal enables ESMs by detecting a "mode" field in package.json. - ESMs are asynchronous, have strict parsing rules, and different interoperability with CommonJS compared to asynchronous CommonJS modules used in Node historically. Adoption of ESMs provides standardized modules across browsers and Node.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie EcamScript (ESM) It's about time !
Ähnlich wie EcamScript (ESM) It's about time ! (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
EcamScript (ESM) It's about time !
- 1. @sebpertus#DevoxxFR Ecmascript Modules aka ESM It’s about time !!!
- 2. @sebpertus#DevoxxFR Sebastien Pertus OSS Lover Node.JS & .Net Core advocate SQL Server man Develops on Windows @sebpertus (Suivez moi, on a un concours de grosse kékétte, et je suis loin derrière !!)
- 3. @sebpertus#DevoxxFR ES6 / ES7 / ES2015 / ES2016 " ES7 is ES2016" " ES6 is ES2015 " " Too long for twitter … "
- 4. @sebpertus#DevoxxFR Where we are today
- 5. @sebpertus#DevoxxFR ES6 : Where we are today 96% On updated browsers http://kangax.github.io/compat-table/es6/
- 6. @sebpertus#DevoxxFR Les Modules CommonJS / AMD / ESM ?
- 7. @sebpertus#DevoxxFR Modules ? • No Html files in Node to load Javascript files • Implementing a way to load files as « modules » in a fair way • 2009 : Projet ServerJS was born (later changed its name to CommonJS) • They defined a first version of « what could be a module »
- 8. @sebpertus#DevoxxFR NodeJS class person { getFullName() { return `${this.lastName} ${this.firstName}`; } } exports.person = person; const people = require("./person"); var p = new people.person();
- 9. @sebpertus#DevoxxFR Browsers • AMD (Asynchronous Module definition) is format defined for browser modules loader • Implemented by framework like require.js <script src="lib/require.js"></script> define(function () { return { getHello: function () { return 'Hello World';} }; }); define(function (require) { var messages = require('./messages'); var m = messages.getHello(); });
- 10. @sebpertus#DevoxxFR ESM : EcamScript Modules • Landed in ES6 export class person { getFullName() { return `${this.lastName} ${this.firstName}`; } } import * as people from './person'; var p = new people.person();
- 13. @sebpertus#DevoxxFR Modules in Browser • Safari 10.1 • Chrome canary 60 • Firefox 54 • Edge 16 With FLAGS https://jakearchibald.com/2017/es-modules-in-browsers/
- 14. @sebpertus#DevoxxFR In browser, don’t forget extensions https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358
- 16. @sebpertus#DevoxxFR ESM. In browsers. Scripts vs Modules
- 17. @sebpertus#DevoxxFR ESM. In browsers. Rember that ! • Modules are deferred. Run after document loaded • "import" and "export" statements can only appears at the top-level • Modules are strict mode by design (think "use strict" )
- 18. @sebpertus#DevoxxFR ESM. In browsers. Defer by default
- 19. @sebpertus#DevoxxFR ESM. In browsers. Defer by default
- 20. @sebpertus#DevoxxFR Demos Demo 02 : Writing EcmaScripts Modules for browsers. Demo 03 : Creating an Express application and modules Demo 04 : Using bundler to handle non ESM browsers
- 21. @sebpertus#DevoxxFR ESM in Node.JS … The Michael Jackson Script !
- 22. @sebpertus#DevoxxFR NodeJS modules : CommonJS • Synchronous • Evaluated during runtime
- 23. @sebpertus#DevoxxFR ESM vs CJS export class person { getFullName() { return `${this.lastName} ${this.firstName}`; } } import * as people from './person'; var p = new people.person(); class person { getFullName() { return `${this.lastName} ${this.firstName}`; } } exports.person = person; const people = require("./person"); var p = new people.person();
- 24. @sebpertus#DevoxxFR ESM modules in NodeJS • https://github.com/nodejs/node-eps/blob/master/002-es- modules.md • Implement interoperability for EcmaScript 6 modules (ESM) and Node’s existing module system (CJS) • Allow a common module syntax for Browser (ES6 spec) and Server side
- 25. @sebpertus#DevoxxFR EF modules vs NodeJS modules • CommonJS is a dynamic loader modules system • Synchronous • Evaluated during runtime • ES is a static loader modules system • Asynchronous • Evaluated during parse time
- 26. @sebpertus#DevoxxFR Example console.log('entry eval'); require('middle'); console.log('entry done); export {}; console.log('middle eval'); require('right'); console.log('middle done'); entry eval middle eval right eval right done middle done entry done export {}; console.log('right eval'); console.log('right done'); entry eval entry done middle eval middle done right eval right done sync async
- 27. @sebpertus#DevoxxFR ESM vs CJS. Solutions evaluated ? • Does Node.js want to ship a synchronous or asynchronous module loader? • Returning a promise (async) • Returning an object (sync) • Both ? • Multiple Solutions investigated: • Use CJS (require) for actuals .js files / Use ESM (import) with a newly file .mjs • Use a double parsing time • Config file • Obiwan Kenobi
- 29. @sebpertus#DevoxxFR Detectiong CJS / ES Modules • https://github.com/nodejs/node/wiki/ES6-Module-Detection-in-Node • https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md
- 30. @sebpertus#DevoxxFR References • http://codeheroics.github.io/talks/nodemjs/ • https://medium.com/the-node-js-collection/an-update-on-es6-modules-in- node-js-42c958b890c • https://hackernoon.com/node-js-tc-39-and-modules-a1118aecf95e • https://medium.com/webpack/the-state-of-javascript-modules- 4636d1774358 • https://github.com/nodejs/node-eps/blob/master/002-es6-modules.md • https://github.com/nodejs/node-eps/issues/57 (mjs tradeoff) • http://2ality.com/2017/01/babel-esm-spec-mode.html • http://2ality.com/2017/05/es-module-specifiers.html
- 31. @sebpertus#DevoxxFR Michael Jackson Script Code compiler must know if it’s a CJS or ES module In certain circumstance an import * from ‘foo’ could be a CJS module or an ES module (same syntax !) Node.js will need to have some kind of mechanism for identifying in advance what kind of file is being loaded foo.js will treat foo.js as CommonJS bar.mjs will treat bar.mjs as an ESM Module. console.log(`Module load ${Date()}`)
- 32. @sebpertus#DevoxxFR Hey Let’s go !!! • We are Ok ? • OK DEMO TIME, DUDE !!!! • Well, at least, I made demos from here, last year…
- 33. @sebpertus#DevoxxFR But… • Suddenly…. • The January 26 …. • Comes in the game … https://github.com/nodejs/node/pull/18392
- 34. @sebpertus#DevoxxFR ESM: NodeJS Package mode package.json { "mode": "esm" }
- 35. @sebpertus#DevoxxFR ESM: NodeJS Package mode • Builds on the « In Defense on JS » proposal • https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md • A directory containing a package.json with this flag will be considered as an ESM • Any « .js » file will be considered as an ESM (otherwise as a CommonJS module) • Benefits • Enables « .js » to be used as ESM • Transparent interop • Easy upgrade path • Cons • Resolver performance • If forget to mention « mode:esm » => Unexpected token export will be raised
- 37. @sebpertus#DevoxxFR ES6 : Modules (ESM) • Node.js 8.7+ : Implementation with flags
- 38. @sebpertus#DevoxxFR ESM: Interoperability • ES modules can import CJS modules • BUT They have only a default export (value of module.exports) • ES modules does not allow using « require() » • Path resolution does not work the same • ESM are asynchronous • CJS modules can’t require() ES modules • You start with ESM, you are stick with it ! • ESM in older Node.JS version • Are you serious ???? • Use @std/esm package
- 39. @sebpertus#DevoxxFR https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b ES Modules in Node Today with polyfil @std/esm @std/esm Works from Node.js 4 Use *.mjs modules file extension
- 41. @sebpertus#DevoxxFR Demo : ESM Modules in Node (nighty build) Demo 05 : Complete solution and migrate to *.mjs Demo 06 : future implementation of dynamic import()
- 43. @sebpertus#DevoxxFR Grab the code https://github.com/Mimetis/ESM Get the readme file and play the session with your organization / meetup groups @sebpertus
Hinweis der Redaktion
- export class Person { firstName: string; lastName: string; constructor(fn: string, ln: string, public age = 27) { this.firstName = fn; this.lastName = ln; } getFullName() { return `Full name : ${this.firstName} ${this.lastName} ${this.age} ` } } export class Kid { } export class adzdazddadadzad { } export class people { kid = () => new Kid(); person = (fn, ln, age) => new Person(fn, ln, age); az = () => new Kid() } var pp = new people(); export default pp;