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 npm package
Search
shimataro
June 29, 2018
Technology
0
620
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.4k
パッケージ開発者の苦悩 -JavaScriptランタイム群雄割拠- / distress of package developer
shimataro
0
530
An introduction to Node.js
shimataro
0
220
KFDのススメ / About KFD
shimataro
3
600
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
1k
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
940
BigInt あれこれ / overview about BigInt
shimataro
0
700
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
660
レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services
shimataro
1
230
Other Decks in Technology
See All in Technology
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Classmethod Odyssey 登壇資料
yamahiro
0
390
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
A Philosophy of Restraint
colly
200
16k
Agile that works and the tools we love
rasmusluckow
325
20k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
What the flash - Photography Introduction
edds
65
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
In The Pink: A Labor of Love
frogandcode
139
22k
Building an army of robots
kneath
301
42k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Web development in the modern age
philhawksworth
203
10k
Ruby is Unlike a Banana
tanoku
96
10k
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学園もよろしく! 手品に興味があったら声をかけてね!
ありがとうございました ありがとうございました