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
760
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.8k
パッケージ開発者の苦悩 -JavaScriptランタイム群雄割拠- / distress of package developer
shimataro
0
660
An introduction to Node.js
shimataro
0
270
KFDのススメ / About KFD
shimataro
3
780
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
1.1k
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
1.2k
BigInt あれこれ / overview about BigInt
shimataro
0
870
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
800
レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services
shimataro
1
260
Other Decks in Technology
See All in Technology
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
140
ファインディにおける Dataform ブランチ戦略
hiracky16
0
250
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
310
Wasmで社内ツールを作って配布しよう
askua
0
180
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.3k
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1k
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
160
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
150
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
170
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
280
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
110
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
230
Featured
See All Featured
Visualization
eitanlees
146
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
Six Lessons from altMBA
skipperchong
28
3.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Typedesign – Prime Four
hannesfritz
42
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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学園もよろしく! 手品に興味があったら声をかけてね!
ありがとうございました ありがとうございました