CDKでCommonJS世代から完全ESModules構成に移したお話 qiita.com/watany/items/9b068…

Nice list, i still get confused with commonjs and esmodules

拙作アドオンの一部にコードがESModulesになっていない物があって、移行しようと思うとモジュール間の参照関係など調べ直さないといけなくてずっと手つかずだったんだけど、Antigravity（Gemini）にやらせてみたところ、8割くらいはうまくやってくれた感じがある。残り2割は自分で直した。 github.com/piroor/textlink/c…

ブラウザ標準でESModules実装により、インポートができるようになっても尚、ビルドが必要な理由。 ・複数のソースを1つにまとめるバンドル化によりリクエスト回数を減らす。 ・コード圧縮により1回のレスポンスのサイズを減らす。 この2つがあるのでWebのフロントエンドもビルドが必須。

2010年ぐらいはブラウザでは、 JSのimport文は使えなかったが、 最近はEsmodulesという仕様が実装されており、ブラウザでもimport 文が使える。 でも、実際は、ファイル分割をしまくるとリクエストが増えるのでそんなに多用するものではなく、バンドルして少数のファイルにまとめる事になる。

Fun fact many may not know or missed: "use strict" is obsolete since all ESModules are strict by default. Aside from that note, i generally agree with @tannerlinsley on that we risk getting a whole generation that thinks these things are part of The Language.

Running a full Expo app without an Expo server, all in the browser with ServiceWorker (server), IndexedDB (fs) and ESModules (packages). I just hope I get some time to write thoroughly about it in a blog.

プログラマーとして余りに未熟…… JavaScriptでプログラミング中、あるクラスAに update() というメソッドあり、クラスA を継承したクラスA1の update() に何を書いても無効で、継承元の A.update() が呼ばれてしまう、という現象に突き当たった。 （▼はい、JavaScript のプログラミングの腕に自信のある方は、ここでスクロールを止めて、自力で原因を考えてください。続いて、葛藤編です。） スペルミス等が無いことは念入りに確認した上で、まず状況をザックリ生成AI に投げて、原因の候補を挙げてもらった。 ・update() というメソッド名以外は問題なく継承先のメソッドが呼ばれるのだから、ゲームのフレームワーク（Phaser3）が update() を特別扱いして、継承元のA.update() を呼んでいるのでは。 →だとしても継承元が呼ばれる理由にはならんやろ →A1.update()の呼び出し箇所をコメントアウトするとA.update() が呼び出されたログも出なくなるので、Phaser3 が勝手に呼び出す説も有り得ない ・クラスA1を二重定義していて、古い定義には update() が無く、そのため 継承元クラスA の update() が直接呼ばれているのでは →全ファイルを確認したが、二重定義はしていない ・クラスA1 が、Phaser の Phaser.scene などのオブジェクトをミックスインしている。この場合、継承元のクラスA の update() が優先されることがある →んなこたぁしていねぇ ・Webpack / ESModules / script タグの複数読み込みがあり、一方の A1 の定義には update() が無く、もう一方には update() があり、update() が無いほうが読み込まれてしまっているのでは →だとしたら update() 以外のメソッドは最新版で動作するのはおかしい ・A1.prototype.update.toString() の結果をログに出力して確認して下さい： →"update(){ super.update(); }" と出てきた！明示的に継承元の A.update() のみを呼び出している。古いA1のソースコード上は、確かにこうなっていた。これでは A1.update() を呼び出しても A.update() が呼ばれるのは当然。 ・ソースが正しくリロードされていないのが原因と思われる。開発サーバを再起動したり、ブラウザのキャッシュをクリアしたりしてみて。バンドラのホットリロード（HMR）が有効で古いクラス定義（prototype）が残っている可能性がある。 →PC再起動までしたが、状況は変わらず。 ・Python の http.server が 304（Not Modified）を返しているなら、ブラウザ側の開発ツールで「Network→Disable cache」をチェックして → 304 でなく 200（毎回ファイルをロードし直す）になったが、状況は変わらず ・これはもうキャッシュの問題ではなくコードの構造的問題。クラスの複数回定義、循環インポート、インスタンス生成のタイミングに問題はないか →すべてチェックしたが、問題なし。同様の処理をしている他のクラスは問題なく動いているし、ソースコードを更新すれば、ちゃんと反映される。 ・A1 クラス生成直後に、A1.toString() を console.log 出力して、最新ファイルになっているか確認してください →最新になっています……。（じっくり A1 クラスのソースコード全体を眺めて）あっ！原因が分かりました！ （▼はい、ここから解答編です。自分で原因を考えてみたい方は、ここでスクロールを止めてください。宜しいですか？……では解答です。） ・【解答】A1 クラスのソースコードの最初のほうに、新しい A1.update() の定義があり、ソースコードの最後のほうに、古い A1.update() の定義（"update(){ super.update(); }" 、つまり継承元の A.update() をそのまま呼び出す）が残っていた。 ある意味、生成AI が、「クラスA1 を二重定義しているのでは？」という指摘は、近いところまで来ていた。クラス自体でなく、メソッドを二重定義していたのだ。しかし、同じクラスの中でメソッドを二重定義したら、エラーで弾いてくれるんじゃないの？ ・後から書いた方で前の定義が完全に上書きされるのは仕様です。 →変数（const や let）ですら二重定義はエラーになるのに、クラス内のメソッドの二重定義がエラーにならないのって、おかしくない？ →ECMAScript の設計上、クラス本体は「ただのオブジェクトリテラルに近い定義」で、最後に同じキー（メソッド名）があれば上書きするのは、エラーでなく仕様。ESLint というツールを使えば二重メソッドを検出したり、VS Code上でエラーとして表示させることも可能。 そこまで知っているのなら、「クラスA1 を二重定義しているのでは？」でなく「クラスA1 内でメソッドを二重定義しているのでは？」という可能性を指摘して欲しかった……。私は、JavaScript が、同一クラス内のメソッドの二重定義を許すということを知らなかったので、A1クラスのソースコード全体をじっくり見直すまで、気づかなった。言われてしまえば原因は単純。灯台下暗し。クラスA1 のソースコード内に、原因があったのだ。Phaserとかキャッシュとかは全く関係なかった。 生成AI が、キャッシュの可能性を追求し始め、アレコレ実験を要求してきた当たりで、「……あ、コレは正しく無い方向に向かっている、このままだと 生成AI に振り回される」と感じたが、藁にも縋る思いで、言われるままに実験を繰り返して、膨大な時間を使ってしまった。まぁ、見たことも無い設定画面とか、知らなかったデバッグ方法を、色々見れて勉強にはなったが。 振り返ってみると、A1.update() が「super.update()」というソースコードになっている、ということをログで確認した時点で、もし 生成AI に頼らなかったら（自分で何とかするしか無かったら）全ファイルから "super.update()" という文字列を検索して、その時点で A1.update() の二重定義に気付けただろう。 生成AI はフル活用すべき。でも「何か違う方向に誘導されている気がする……」と感じたら、いったん会話をやめて、自分の頭で状況を整理し直す時間を取るべきだと再確認できた。

You don’t need to use a JavaScript framework. Just use ESModules 🤷🏻‍♂️

¿Usas ESM? Ya puedes importar JSON sin fetch. Así de limpio. #ESModules #DevTips

and there was this other time where I asked another "agent" to modify the webpack build so my module would get transpiled into both ESModules and CommonJS. it ended up fixing the transpilation but severely damaging the hot reload server.

Day 145 – #365DaysOfCode ✨ Balancing DSA, Web Dev & College Grind 🎯 DSA ✅ Minimum Path Sum ✅ Container With Most Water ✅ Roman to Integer 🌐 Web Dev ✅ Intro to Node.js ✅ require vs import ✅ CJS vs ESModules #DSA #LeetCode #GFG #WebDev #BuildInPublic #LearnInPublic

Alright, I got this whether using ESModules or CommonJS, the SDK always tries to use require() to import a module (@aa-sdk/core) that is strictly ESM-only, which triggers the ERR_REQUIRE_ESM error @virtuals_io

Ye toh uper uper ka hai , let me take you inside to these tech stacks . what should you know in JavaScript ? > how JavaScript execution works >Variables (var, let, const), Data Types >Loops, Conditions, Functions, Arrays , Array methods, Objects >DOM Manipulation > Events, Event Delegation >Fetch API, Promises, async/await >ES6 Features (Destructuring, Spread, Arrow Function >Closures, Hoisting, Scoping >Prototypes, this, call/apply/bind >Event Loop, Micro vs Macro Tasks >Modules (ESModules, CommonJS) >LocalStorage, SessionStorage, Cookies .

FirefoxだけがServiceWorker内でのESModules対応してないんですよ サポート切りたい caniuse.com/mdn-javascript_s…

Not if you use ESModules 🤷🏻‍♂️

マシン語をバイナリのまま読めないのでオープンソースに頼ります Z80逆アセンブラ in JavaScript/ESmodules アーキテクチャ図を使ったシミュレーション(未完成)もいい感じ！ fukuno.jig.jp/4699 #Z80 #アセンブリ #アセンブラ #マシン語 #z80js

Day 83 of #100DaysodCode Did 1 problem ->Word Break Got started with NodeJs-> learnt about v8, histroy of NodeJs, Standard Modules used (CommonJs,EsModules)

JS (most runtimes) supports modules, ESModules. In JS, all function params can be "optional". JS rest params exists since ES6/ES2015. TypeScript is a superset of JS, with types, you can do OOP but it's not a pure OOP language.