Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
mjs
Search
Yosuke Furukawa
PRO
April 24, 2018
Programming
4
1.1k
mjs
We are JavaScripters で発表した .mjs の話です。
Yosuke Furukawa
PRO
April 24, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Porting a visionOS App to Android XR
akkeylab
0
460
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Discover Metal 4
rei315
2
130
Team operations that are not burdened by SRE
kazatohiei
1
310
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Visualization
eitanlees
146
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
A better future with KSS
kneath
238
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
.mjs 2018/04/24 We are JavaScripters!! @ Recruit Technologies
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Node.js v10 Release (maybe tomorrow)
Node.js v10 Notable Changes • for-await-of in Stream experimental
support • ESModules experimental support • private/public class fields experimental support • fs/promises
DEMO
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();
file name is … foo.mjs
ʊʊਓਓਓʊʊ ʼɹ.mjs !!!ɹʻ ʉʉY^Y^Yʉʉ
Yes, we have long discussion about ESM.
We need ".mjs".
Why?
Module !== Script
Module [ "strict", "top level scope", "reserved await" ] Script
[ "non strict", "global scope", ]
We need to detect which mode on load file.
if file.lastIndexOf(".mjs") { Module } else { Script }
Simple and Faster
We do not use ".js" ???? (´ɾωɾʆ)
No, 2 reasons.
Use loader option.
DEMO
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' }; }
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();
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
You just use ".js" if you don’t need to use
ESM.
You would be better to use ".mjs", if you need
ESM on Node.js v9-10.
You would be better to wait the conclusion, if you
want to use ES Modules in the future.
ऄ (da-soku) +
Filename Extensions YOMO-YAMA
Long long time ago… Brendan Eich saids …
)PXEPXFUIJOLFT FTpMFFYUFOTJPOTUPEFUFDU WFSTJPOT // sorry no reference… I cannot find
link 8FOFFEUPDIBOHFpMFOBNFFYUFOTJPOTUPVQHSBEF UIBUJTOJHIUNBSFʜ
*EJTMJLFNPEFT8IPEPFTOU #VUUIJTTPVOETMJLF UIF7FSTJPOJOHJTBOBOUJQBUUFSOTIJCCPMFUI*WF IFBSESFDFOUMZSF8FC4PDLFUT*UEPFTOPUSFqFDU SFBMJUZ https://esdiscuss.org/topic/no-more-modes 3FDFOUMZ *NFUXJUIUIF(PPHMF7UFBNGPSUXPGVMM EBZT0OFNFTTBHFUIBUDBNFUISPVHIMPVEBOE DMFBS
UIBU*TBJE*XPVMESFMBZUPUIFMJTU JTQMFBTF OPNPSFNPEFT
Web does not have version/mode.
All we need is feature detection.
Detectable Feature // Feature Detection if (!Array.isArray) {} if (!String.prototype.trimStart)
{}
un-detectable feature (on runtime) class A {} import / export
#foo // syntax
Modern JavaScript is difficult to detect features.
Module JavaScript is JavaScript 2.0
JavaScript is not so easy, We are JavaScripters, Every JSers
would be better to enjoy chaos.
Enjoy JS Chaos :)
Thanks