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
990
mjs
We are JavaScripters で発表した .mjs の話です。
Yosuke Furukawa
PRO
April 24, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
AppRouter Panel Talk
yosuke_furukawa
PRO
1
520
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.4k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.8k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.4k
Deep Dive International Conference
yosuke_furukawa
PRO
0
110
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.9k
Other Decks in Programming
See All in Programming
Powerfully Typed TypeScript
euxn23
3
1.7k
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
Open standards for building event-driven applications in the cloud
meteatamel
0
230
Deep Dive into React Stream/Serialize
mugi_uno
4
860
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
mb_trim関数を作りました
youkidearitai
PRO
1
210
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
480
AmperとFleetを使ったAndroidアプリ
yoppie
0
300
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
スタックトレース始めてみた
kuro_kurorrr
4
1.1k
Jetpack Composeとデザインシステム
rmakiyama
0
230
Sheets API使ってみた
toshi0383
2
180
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
The Mythical Team-Month
searls
217
42k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
What the flash - Photography Introduction
edds
64
11k
Six Lessons from altMBA
skipperchong
22
3k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Statistics for Hackers
jakevdp
790
220k
Design by the Numbers
sachag
274
18k
YesSQL, Process and Tooling at Scale
rocio
165
13k
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