ESmodulesに移行

[syuilo]

Summary

node向けのライブラリもes modulesを使用するものが増えてきて、commonjsだと使えないため

やることリスト

• ディレクトリインポートを直す
• 拡張子省略しない
• requireをimportにする
• jsonをimportしている箇所をどうにかする
  • --experimental-json-modules
• __dirnameを置き換える
  • https://stackoverflow.com/a/64383997
• デコレータがなんか動かないのを何とかする
• use the node: protocol for imports
• Add "type": "module" to your package.json
• autobind-decorator の代替を考える
• テストが動かないのをどうにかする

ref. https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[syuilo]

ESMだとディレクトリインポートができないみたい

例えば

import boot from './boot';

は

import boot from './boot/index.js';

に書き換える必要がある

[syuilo]

(そんなのTypeScriptコンパイラーがよしなにやってほしい)

[syuilo]

あー、あとそもそも拡張子省略できない

[syuilo]

死ぬほど大変じゃん

[syuilo]

とても大変ということが分かったので、ESMに移行するのは一旦諦め、CJSに対応している古いバージョンのライブラリを使い続けていくことにする

[rinsuki]

なんか単純置換でいけそうな気もする

[syuilo]

ふーむ

[syuilo]

あるインポートがローカルのファイルを指しているのかパッケージを指しているのか区別が難しい場合もあるかもしれないけど、ほとんどは置換でいけるか…？

[syuilo]

多分ほとんどのローカルのインポートは./とかで始まってる気がするからいけるかも

[rinsuki]

ローカルのファイルは基本 @/ or ./ or ../ から始まるはず

[mei23]

node向けのライブラリもes modulesを使用するものが増えてきて、commonjsだと使えないため

例えばどれだわ？

[syuilo]

pureimageとかis-rootとか

[syuilo]

jsonをrequireしてる箇所ってどう置き換えれば良いんだろ

https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6

によると将来的には出来るようになるらしいけど

[syuilo]

import * as foo from './foo.json';って書けばTypeScriptがよしなにやってくれるっぽい

[syuilo]

いや嘘
やってくれなかった

[syuilo]

現時点での移行は難しいかも

[mei23]

あんまりCommonJSで動かないモジュールって記憶になくて

pureimageは 0.3.3 >= は本当にdistフォルダがないから単に壊れてるだけかも
Error: Cannot find module '.../node_modules/pureimage/dist/pureimage-umd.cjs'. Please verify that the package.json has a valid "main" entry

is-rootはESM要求してるけど、そもそもrootチェックっていらないのではと。

[rinsuki]

というか is-root 中身は process.getuid() === 0 だしわざわざパッケージ使わなくてもよさそう

[syuilo]

is-rootたった3行しかなかった

[syuilo]

--experimental-json-modules付ければいけた
https://nodejs.org/api/esm.html#esm_experimental_json_modules

[syuilo]

__dirname は使えないっぽい

[syuilo]

https://stackoverflow.com/a/64383997

[syuilo]

あー、拡張子を.jsにするとts-nodeで直接ts動かす時にエラーになるな

[syuilo]

👀
TypeStrong/ts-node#783

[syuilo]

うーんﾖｸﾜｶﾗﾝ

[marihachi]

これ止めといたほうが良い気がする
よっぽど依存モジュールが少なくないと厳しそう

[syuilo]

npmでインストールしたライブラリがCJSでもESMは使えるよね？そんなことない？

[syuilo]

もし依存ライブラリもすべてESMでないといけないとしたらESM移行は不可能そう

[syuilo]

npmでインストールしたライブラリがCJSでもESMは使えるよね？そんなことない？

ESMで出力したらTypeError: redisLock is not a functionが出るようになったため

[syuilo]

npmでインストールしたライブラリがCJSでもESMは使えるよね？そんなことない？

ESMで出力したらTypeError: redisLock is not a functionが出るようになったため

import * as redisLock from 'redis-lock'; を import redisLock from 'redis-lock'; にしたら直った

[syuilo]

C:\Users\ai\projects\misskey\packages\backend\node_modules\reflect-metadata\Reflect.js:553
                var decorated = decorator(target, propertyKey, descriptor);
                                ^

TypeError: decorator is not a function
    at DecorateProperty (C:\Users\ai\projects\misskey\packages\backend\node_modules\reflect-metadata\Reflect.js:553:33)
    at Reflect.decorate (C:\Users\ai\projects\misskey\packages\backend\node_modules\reflect-metadata\Reflect.js:123:24)
    at __decorate (file:///C:/Users/ai/projects/misskey/packages/backend/built/services/chart/core.js:8:92)
    at file:///C:/Users/ai/projects/misskey/packages/backend/built/services/chart/core.js:508:1
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)
    at async handleMainPromise (node:internal/modules/run_main:63:12)

が出るわね

[syuilo]

:tasukete:

[syuilo]

npmでインストールしたライブラリがCJSでもESMは使えるよね？そんなことない？

ライブラリによっては型として正しいimport方法と実際に動くimport方法が異なる場合が発生するな

[syuilo]

C:\Users\ai\projects\misskey\packages\backend\node_modules\reflect-metadata\Reflect.js:553
                var decorated = decorator(target, propertyKey, descriptor);
                                ^

TypeError: decorator is not a function
    at DecorateProperty (C:\Users\ai\projects\misskey\packages\backend\node_modules\reflect-metadata\Reflect.js:553:33)
    at Reflect.decorate (C:\Users\ai\projects\misskey\packages\backend\node_modules\reflect-metadata\Reflect.js:123:24)
    at __decorate (file:///C:/Users/ai/projects/misskey/packages/backend/built/services/chart/core.js:8:92)
    at file:///C:/Users/ai/projects/misskey/packages/backend/built/services/chart/core.js:508:1
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)
    at async handleMainPromise (node:internal/modules/run_main:63:12)

が出るわね

autobind消したら出なくなった

[syuilo]

起動しようとするとエラーは出なくなったけど起動しない

[syuilo]

起動しようとするとエラーは出なくなったけど起動しない

直った

[syuilo]

一応起動するとこまでは来た

[syuilo]

autobind消したから、this周りの不具合が発生するはずなので何か対策考えないと

[syuilo]

https://github.com/misskey-dev/misskey/tree/esm

[syuilo]

うーむ

• https://stackoverflow.com/questions/56503531/what-is-a-good-way-to-automatically-bind-js-class-methods
• https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1

[syuilo]

autobind消したから、this周りの不具合が発生するはずなので何か対策考えないと

おとなしくthis.foo = this.foo.bind(this)をコンストラクタに書くようにした

[syuilo]

テストが動かない問題を解決した人に¥3000進呈

[Johann150]

A lot of calls to os.popup still use import(...).

[tamaina]

A lot of calls to os.popup still use import(...).

Is this a standard feature of esmodules...? @Johann150