update-storybook-commonjs-fix #3
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
（機械翻訳）これは上記のスレッドから更新された修正です。 必要に応じてマージします。 個人的には、前回書いたものよりきれいだと思います。 |
|
@JU12000 It has also inspired me to learn about CJS/ESM. |
harupiyo
pushed a commit
that referenced
this pull request
Apr 18, 2022
技術的背景
1. SvelteKit はESM を採用している
package.json に "type": "module" と記載されている。
svelte.config.js もESM の書式を使っている。
2. Storybook はCommonJS
Storybook インストール時の .storybook/main.js にはこのように書かれていた
"preprocess": require("../svelte.config.js").preprocess
3. `yarn storybook` でStorybook を動作させる時だけ、CommonJS としたい
- Storybook は.storybook/ 下に設定ファイルを置くので、.storybook/package.json を用意し、"type": "commonjs" を記載するか、
- .storybook/main.js を.storybook/main.cjs とするか
4. 3. において、.storybook/main.cjs から読み込む svelte.config.js(ESM) をCommonJSである main.cjs になじませる方法が必要となる
大前提として、CJSからESMを、その逆の利用も可能。その説明は次のpostd の記事にある。
https://postd.cc/the-state-of-javascript-modules/
CJSからESMを利用する具体的な方法は、非同期import() を使うこと。
https://postd.cc/the-state-of-javascript-modules/
CJSは非同期import()を介してのみESMをインポートできる
ブラウザの挙動にできるだけ近づけるようにNode.jsによってESMは非同期でロードされます。
そのため、ESMの同期 require() は不可能となります。その結果、ESMに依存する全ての関数も非同期である必要があります。
以下の import().then() にあたる。
"preprocess": require('../svelte.config.js')
↓
"preprocess": import('../svelte.config.js').then((module) => { return module.preprocess; })
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is the streamlined fix from my followup comment: storybookjs/storybook#11587