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
CJSとESMとnpmパッケージ / CommonJS and ES Modules and ...
Search
shimataro
June 29, 2018
Technology
0
670
CJSとESMとnpmパッケージ / CommonJS and ES Modules and npm package
Node学園 31時限目の発表資料です
https://nodejs.connpass.com/event/90936/
shimataro
June 29, 2018
Tweet
Share
More Decks by shimataro
See All by shimataro
Single Executable Applicationsについて / About Single Executable Applications
shimataro
0
1.6k
パッケージ開発者の苦悩 -JavaScriptランタイム群雄割拠- / distress of package developer
shimataro
0
580
An introduction to Node.js
shimataro
0
240
KFDのススメ / About KFD
shimataro
3
670
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
1k
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
1k
BigInt あれこれ / overview about BigInt
shimataro
0
760
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
720
レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services
shimataro
1
240
Other Decks in Technology
See All in Technology
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
190
全社横断データ活用推進のコツと その負債とのつき合い方
masatoshi0205
0
170
利きプロセススケジューラ
sat
PRO
4
2.6k
Windows Autopilot Deployment by OSD Guy
tamaiyutaro
0
310
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
RustとWebAssemblyを使って高速な画像処理をWebアプリで実行しよう
rebonire626
0
110
DatabricksにおけるLLMOpsのベストプラクティス
taka_aki
4
1.6k
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
250
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
[FOSS4G 2024 Japan LT] LLMを使ってGISデータ解析を自動化したい!
nssv
1
170
AIチャットボット開発への生成AI活用
ryomrt
0
140
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
0
1.1k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Producing Creativity
orderedlist
PRO
341
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
560
Statistics for Hackers
jakevdp
796
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Six Lessons from altMBA
skipperchong
27
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Thoughts on Productivity
jonyablonski
67
4.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
GitHub's CSS Performance
jonrohan
1030
460k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
A designer walks into a library…
pauljervisheath
202
24k
Transcript
CJSとESMとNPMパッケージ CJSとESMとNPMパッケージ (2018/06/29) (2018/06/29) 小田島 太郎 / @shimataro NODE学園 31時限目
NODE学園 31時限目
自己紹介 自己紹介 ウェブリオ株式会社所属(京都) サーバサイドエンジニア 趣味は手品 小田島 太郎 shimataro@GitHub odashima.taro@Facebook shimataro999@Twitter
この発表について この発表について 対象: 汎用 npmパッケージを開発している人 技術レベル: 中級 npmパッケージやBabelの基礎知識を前提 技術的に濃い話ではありません ↓スライドはこちら↓
https://speakerdeck.com/shimataro https://shimataro.github.io/slides/
目次 目次 背景 今回のゴール CJSとESM パッケージの構成 コード生成 まとめ
始める前に 始める前に
7/5 関西NODE学園 2時限目 7/5 関西NODE学園 2時限目
それでは始めます それでは始めます
背景 背景
背景 背景 JavaScript(ECMAScript)のモジュール require() / module.exports (CommonJS; CJS) import /
export (ES Modules; ESM) ネイティブESMはあまり使われていない (BabelでCJSに変 換するのが一般的) でもきっとそのうち普及する
今回のゴール 今回のゴール
今回のゴール 今回のゴール CJS / ESM / Babelの どれからでも使える パッケージモジ ュールを作りたい
↓ // パッケージ "foo" export default foo; export {bar}; // CJS const {default: foo, bar} = require("foo"); // ESM / Babel import foo, {bar} from "foo";
今回のゴール 今回のゴール パッケージの条件 ソースコードは単一 ビルド時に複数ファイルの生成はOK default export / named exports
両方対応 ソースコード内に変なハックは入れない おまじない NG 古い文法 NG 作る側にも使う側にも、極力負担をかけない
CJSとESM CJSとESM
CJSとESM CJSとESM 拡張子 .mjs はESM それ以外の拡張子はCJS export default foo; export
{bar}; module.exports = foo; // または exports.default = foo; exports.bar = bar;
CJSとESM CJSとESM 相互運用について Native ES Modules - something almost, but
not quite entirely unlike CommonJS by Gil Tayor
CJSとESM CJSとESM 1つのファイルで全部対応するのはややこしい .mjs と .js を両方用意する方が確実 最初にESMで書いて、CJS形式にも変換 Babelの出番
パッケージの構成 パッケージの構成
パッケージの構成 パッケージの構成 package.json 内の main を 拡張子なし で指定 2種類のindexを用意 ./index.js
(CJS/Babel用) ./index.mjs (ESM用) http://yosuke- furukawa.hatenablog.com/entry/2016/05/10/111102 { ... "main": "./index", // ".js" はつけない ... }
コード生成 コード生成
コード生成 コード生成 概要 index.js はこうする index.mjs はこのままでOK exports.default = foo;
exports.bar = bar; export default foo; export {bar};
コード生成 - CJS コード生成 - CJS index.js は普通にBabelで変換すればOK ↓ export
default foo; export {bar}; exports.default = foo; exports.bar = bar;
コード生成 - ESM コード生成 - ESM index.mjs は何もしなくてOK? Nodeがサポートしている文法だけを使うならOK デコレータとかstatic
propertiesとか使えない 汎用 パッケージなら、ある程度古いバージョンもサポー トしたい せめてLTSくらいは… そのために 古い文法 を使うのは嫌だ というわけで、 やっぱりBabelは使いたい
コード生成 - ESM コード生成 - ESM Babel使用時の注意 その1 babel-preset-env のデフォルトはCJS形式
import / export構文を変換しない場合はこうする // .babelrc { "presets": [ ["env", {"modules": false}] ] }
コード生成 - ESM コード生成 - ESM Babel使用時の注意 その2 拡張子が自動的に .js
になる ESMでは .mjs じゃないとダメ Babel7に --keep-file-extension が登場 拡張子を変更しないオプション 変換元の拡張子も .mjs にする必要あり まだbeta段階
コード生成(ESM) コード生成(ESM) 選択肢は2つ Babel単体で解決 Babel7 & --keep-file-extension 他のツールを導入 変換後に拡張子をリネーム 今回は後者(gulp)を採用
Babel6(安定版)でも使える 元の拡張子に制限なし
実際に作ってみた 実際に作ってみた
実際に作ってみた 実際に作ってみた ESM(.mjs) / Babel CJS https://github.com/shimataro/hell-word npm install @shimataro/hell-word
import foo, {bar} from "@shimataro/hell-word"; foo(); // "hell, word" bar(); // "地獄の言葉" const {default: foo, bar} = require("@shimataro/hell-word"); foo(); // "hell, word" bar(); // "地獄の言葉"
まとめ まとめ 単一ソースからCJS/ESM/Babel対応のパッケージを作 る方法 まずESMの export 構文で作る CJS用は exports.default に変換→
.js ESM用はそのまま→ .mjs package.json の "main" に拡張子をつけない サンプル作ってみたからよかったら参考にしてね 関西Node学園もよろしく! 手品に興味があったら声をかけてね!
ありがとうございました ありがとうございました