Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(use-case/nodecli): ESModule対応 #1465

Merged
merged 20 commits into from
Sep 5, 2022
Merged

fix(use-case/nodecli): ESModule対応 #1465

merged 20 commits into from
Sep 5, 2022

Conversation

lacolaco
Copy link
Collaborator

Close #1355

  • 各セクションのCommonJSコードのESM化
  • CommonJSのコラム化
    • サンプルコードはだいぶ削った
  • ライブラリバージョンアップ

要確認

  • CommonJSのコラム部分
  • __dirname が使えなくなったのをどうするかなーと思ったが、 import.meta の説明増やすのもアレなので path.resolve すること自体やめて(もともと説明してなかった)、package.json からの相対パスで読み込むようにしたが、問題あります?

@lacolaco lacolaco requested a review from azu August 28, 2022 07:20
@bot-user
Copy link

bot-user commented Aug 28, 2022

Deploy Preview for js-primer ready!

Name Link
🔨 Latest commit df3adaa
🔍 Latest deploy log https://app.netlify.com/sites/js-primer/deploys/631452b7f88f3d00097317da
😎 Deploy Preview https://deploy-preview-1465--js-primer.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

source/use-case/nodecli/md-to-html/README.md Outdated Show resolved Hide resolved
const sample = fs.readFileSync(path.resolve(__dirname, "./fixtures/sample.md"), { encoding: "utf8" });
const expected = fs.readFileSync(path.resolve(__dirname, "./fixtures/expected.html"), { encoding: "utf8" });
const sample = fs.readFileSync("test/fixtures/sample.md", { encoding: "utf8" });
const expected = fs.readFileSync("test/fixtures/expected.html", { encoding: "utf8" });
Copy link
Collaborator

@azu azu Aug 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import.meta自体の説明はあってもいい気はするけど、__dirname はちょっと遠いから迷うなー

import url from "node:url";
import path from "node:path";
const __filename__ = url.fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename__);
new URL('fixtures/sample.md', import.meta.url);

ならもうちょっとスッキリする?

import.meta.resolve も将来あるし、迷いどころ。
Node.js の import.meta.resolve について

とりあえずはこのままでもいいけど、これってcwdからの位置になるんだっけ?
まあ、npm testで実行にしてるならずれないか

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cwdからの位置ですね。npm test前提なのでこれでよしとしたいです

source/use-case/nodecli/argument-parse/README.md Outdated Show resolved Hide resolved
source/use-case/nodecli/argument-parse/README.md Outdated Show resolved Hide resolved
source/use-case/nodecli/argument-parse/README.md Outdated Show resolved Hide resolved
source/use-case/nodecli/argument-parse/README.md Outdated Show resolved Hide resolved
同期APIと非同期APIはどちらも`fs`モジュールに含まれていますが、
非同期形式のAPIは`fs/promises`というモジュール名でも参照できるようになっています。
この書籍では分かりやすさのために、非同期形式のみのAPIを提供する`fs/promises`モジュールを利用します。

Node.jsの標準モジュールは`node:fs`のように`node:`プレフィックスをつけてインポートできます。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@azu
Copy link
Collaborator

azu commented Aug 28, 2022

test落ちてるのは #1464 で、ESMのexample testができなくて、cjsとesmでテスト方法を分けたからっぽい

https://github.com/asciidwango/js-primer/tree/master/source/use-case/nodecli/refactor-and-unittest/src/example

@lacolaco
Copy link
Collaborator Author

lacolaco commented Sep 4, 2022

テストが落ちてるのはtodoapp側っぽい??よくわかってない

@lacolaco lacolaco requested a review from azu September 4, 2022 05:49
@@ -14,6 +14,7 @@ describe("example:es", function() {
const esmFiles = globby.sync([
`${sourceDir}/use-case/todoapp/**/*-example.js`, // *-example.js
`${sourceDir}/use-case/todoapp/**/*.example.js`, // *.example.js
`${sourceDir}/use-case/nodecli/**/*.js`, // *.js
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これだとexample以外も読み込んで落ちてるんじゃないかな?
${sourceDir}/use-case/nodecli/**/example/*.js が正しそう

Copy link
Collaborator

@azu azu Sep 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

greet.jsとgree-main.jsぐらいがテストされるはず。
md2html.jsとか読み込んでもエラーしそうな気もする

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほどたしかに

@lacolaco
Copy link
Collaborator Author

lacolaco commented Sep 4, 2022

テスト通るようになったらlint errorちゃんと出るようになったんで修正追いかけましたが、もう再レビュー可能そうです

Copy link
Collaborator

@azu azu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

細かいところコメントした。
LGTM

細かいけど
https://github.com/asciidwango/js-primer/pull/1465/files#diff-00a68ff81c59d6d9c766171da538662ae315ad602b2149617acd993733195d4dR95
test/md2html-test.js だけファイル名のtitleがついてないことに気づいた。

image

source/use-case/nodecli/read-file/README.md Outdated Show resolved Hide resolved
source/use-case/nodecli/refactor-and-unittest/README.md Outdated Show resolved Hide resolved
次の例では、先ほどインストールした`commander`パッケージを`node_modules`ディレクトリから読み込んでいます。
Node.jsはECMAScriptモジュールからCommonJSモジュールをインポートする方向の相互運用性をサポートしています。
たとえば、次のようにCommonJSモジュールで`exports`オブジェクトを使ってエクスポートされたオブジェクトは、ECMAScriptモジュールで`import`文を使ってインポートできます。
Node.jsの標準モジュールはECMAScriptモジュールのJavaScriptファイルからでも利用できますが、それはこの相互運用性によるものです。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これあんまり意識してなかったけど、確かにそうなってた。
https://github.com/nodejs/node/tree/main/lib

前提として、Node.jsの標準モジュール自体がCJSで書かれてることが抜けている感じがする。
なんか別の例でもいいのかなーとはちょっと思ったけど、思いついてない。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

標準モジュールのことは125行目でさらっと書いてますね

@lacolaco
Copy link
Collaborator Author

lacolaco commented Sep 5, 2022

マージします

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Node.js ESMの対応
3 participants