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

mjs

 mjs

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

Yosuke Furukawa

April 24, 2018
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. .mjs
    2018/04/24 We are JavaScripters!! 

    @ Recruit Technologies

    View full-size slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View full-size slide

  3. Node.js v10 Release
    (maybe tomorrow)

    View full-size slide

  4. Node.js v10 

    Notable Changes
    • for-await-of in Stream experimental support
    • ESModules experimental support
    • private/public class fields experimental
    support
    • fs/promises

    View full-size slide

  5. 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();

    View full-size slide

  6. file name is … foo.mjs

    View full-size slide

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

    View full-size slide

  8. Yes, we have long
    discussion about ESM.

    View full-size slide

  9. We need ".mjs".

    View full-size slide

  10. Module !== Script

    View full-size slide

  11. Module
    [
    "strict",
    "top level scope",
    "reserved await"
    ]
    Script
    [
    "non strict",
    "global scope",
    ]

    View full-size slide

  12. We need to detect which
    mode on load file.

    View full-size slide

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

    View full-size slide

  14. Simple and Faster

    View full-size slide

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

    View full-size slide

  16. No, 2 reasons.

    View full-size slide

  17. Use loader option.

    View full-size slide

  18. 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'
    };
    }

    View full-size slide

  19. 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();

    View full-size slide

  20. 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

    View full-size slide

  21. You just use ".js" if you
    don’t need to use ESM.

    View full-size slide

  22. You would be better to use
    ".mjs", if you need ESM on
    Node.js v9-10.

    View full-size slide

  23. You would be better to wait
    the conclusion, if you want
    to use ES Modules in the
    future.

    View full-size slide

  24. ऄ଍ (da-soku)
    +

    View full-size slide

  25. Filename Extensions
    YOMO-YAMA

    View full-size slide

  26. Long long time ago…
    Brendan Eich saids …

    View full-size slide

  27. )PXEPXFUIJOLFT FTpMFFYUFOTJPOTUPEFUFDU
    WFSTJPOT
    // sorry no reference… I cannot find link
    8FOFFEUPDIBOHFpMFOBNFFYUFOTJPOTUPVQHSBEF
    UIBUJTOJHIUNBSFʜ

    View full-size slide

  28. *EJTMJLFNPEFT8IPEPFTOU #VUUIJTTPVOETMJLF
    UIF7FSTJPOJOHJTBOBOUJQBUUFSOTIJCCPMFUI*WF
    IFBSESFDFOUMZSF8FC4PDLFUT*UEPFTOPUSFqFDU
    SFBMJUZ
    https://esdiscuss.org/topic/no-more-modes
    3FDFOUMZ *NFUXJUIUIF(PPHMF7UFBNGPSUXPGVMM
    EBZT0OFNFTTBHFUIBUDBNFUISPVHIMPVEBOE
    DMFBS UIBU*TBJE*XPVMESFMBZUPUIFMJTU JTQMFBTF
    OPNPSFNPEFT

    View full-size slide

  29. Web does not have

    version/mode.

    View full-size slide

  30. All we need is feature
    detection.

    View full-size slide

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

    View full-size slide

  32. un-detectable feature (on runtime)
    class A {}
    import / export
    #foo
    // syntax

    View full-size slide

  33. Modern JavaScript is
    difficult to detect features.

    View full-size slide

  34. Module JavaScript is
    JavaScript 2.0

    View full-size slide

  35. JavaScript is not so easy,
    We are JavaScripters,
    Every JSers would be better
    to enjoy chaos.

    View full-size slide

  36. Enjoy JS Chaos :)

    View full-size slide