Upgrade to Pro — share decks privately, control downloads, hide ads and more …

mjs

 mjs

We are JavaScripters で発表した .mjs の話です。

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

April 24, 2018
Tweet

Transcript

  1. .mjs 2018/04/24 We are JavaScripters!! 
 @ Recruit Technologies

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. Node.js v10 Release (maybe tomorrow)

  4. Node.js v10 
 Notable Changes • for-await-of in Stream experimental

    support • ESModules experimental support • private/public class fields experimental support • fs/promises
  5. DEMO

  6. DEMO import fs from 'fs/promises'; import util from 'util'; async

    function main() { try { const content = await fs.readFile(process.argv[2]) console.log(content.toString()) } catch(e) { console.error(e.toString()); } } main();
  7. file name is … foo.mjs

  8. ʊʊਓਓਓʊʊ ʼɹ.mjs !!!ɹʻ ʉʉY^Y^Yʉʉ

  9. Yes, we have long discussion about ESM.

  10. We need ".mjs".

  11. Why?

  12. Module !== Script

  13. Module [ "strict", "top level scope", "reserved await" ] Script

    [ "non strict", "global scope", ]
  14. We need to detect which mode on load file.

  15. if file.lastIndexOf(".mjs") { Module } else { Script }

  16. Simple and Faster

  17. We do not use ".js" ???? (´ɾωɾʆ)

  18. No, 2 reasons.

  19. Use loader option.

  20. DEMO

  21. DEMO const builtins = Module.builtinModules; const URL = url.URL; const

    baseURL = new URL('file://'); baseURL.pathname = `${process.cwd()}/`; export function resolve(specifier, parentModuleURL = baseURL, defaultResolve) { if (builtins.includes(specifier)) { return { url: specifier, format: 'builtin' }; } const resolved = new url.URL(specifier, parentModuleURL); const ext = path.extname(resolved.pathname); return { url: resolved.href, format: 'esm' }; }
  22. DEMO $ node —experimental-modules —loader loader.mjs file.js // file.js
 import

    fs from 'fs'; import util from 'util'; const readFile = util.promisify(fs.readFile); async function main() { try { const content = await readFile(process.argv[2]) console.log(content.toString()) } catch(e) { console.error(e.toString()); } } main();
  23. mode detection on flag `—mode` , package.json see: https://gist.github.com/ceejbot/b49f8789b2ab6b09548ccb72813a1054 


    https://docs.google.com/presentation/d/ 1xK1ana_TIxfAHX33CYVHFnJsV0If_YirLtRBBga9cv0/edit#slide=id.p
  24. You just use ".js" if you don’t need to use

    ESM.
  25. You would be better to use ".mjs", if you need

    ESM on Node.js v9-10.
  26. You would be better to wait the conclusion, if you

    want to use ES Modules in the future.
  27. ऄ଍ (da-soku) +

  28. Filename Extensions YOMO-YAMA

  29. Long long time ago… Brendan Eich saids …

  30. )PXEPXFUIJOLFT FTpMFFYUFOTJPOTUPEFUFDU WFSTJPOT // sorry no reference… I cannot find

    link 8FOFFEUPDIBOHFpMFOBNFFYUFOTJPOTUPVQHSBEF UIBUJTOJHIUNBSFʜ
  31. *EJTMJLFNPEFT8IPEPFTOU #VUUIJTTPVOETMJLF UIF7FSTJPOJOHJTBOBOUJQBUUFSOTIJCCPMFUI*WF IFBSESFDFOUMZSF8FC4PDLFUT*UEPFTOPUSFqFDU SFBMJUZ https://esdiscuss.org/topic/no-more-modes 3FDFOUMZ *NFUXJUIUIF(PPHMF7UFBNGPSUXPGVMM EBZT0OFNFTTBHFUIBUDBNFUISPVHIMPVEBOE DMFBS

    UIBU*TBJE*XPVMESFMBZUPUIFMJTU JTQMFBTF  OPNPSFNPEFT
  32. Web does not have
 version/mode.

  33. All we need is feature detection.

  34. Detectable Feature // Feature Detection if (!Array.isArray) {} if (!String.prototype.trimStart)

    {}
  35. un-detectable feature (on runtime) class A {} import / export

    #foo // syntax
  36. Modern JavaScript is difficult to detect features.

  37. Module JavaScript is JavaScript 2.0

  38. JavaScript is not so easy, We are JavaScripters, Every JSers

    would be better to enjoy chaos.
  39. Enjoy JS Chaos :)

  40. Thanks