Edited at

5分でわかるbabelプラグインのつくりかた


このスライドは「JavaScript メタプログラミング勉強会@さくらインターネット metapro.es」のLT資料です。



はじめに



メタプログラミングすごそう



実行時注入ならRubyとかPHP, JSで結構簡単にできる



インジェクションなら楽にできる



けど黒魔術になりがちだし実際のプロダクト開発でやりだすとどうしても扱いづらい



他人の書いたメタプロ生成コードをみたとき



🤔🤔🤔🤔🤔



🙄



静的解析すごそう



けどわかんねーよ!



という人のためのはじめの一歩



自己紹介



メタプログラミングわかりません



自分がわかるようになるために分かる人を呼んで勉強会を開いた



なんで話すか



自分のQoLを高める程度なら意外と誰でもプラグイン書けるんやで」って言いたいから



つくったもの



process.env.NODE_ENVproduction 以外の時に設定した文字を置き換えてくれるプラグイン



https://github.com/potato4d/babel-plugin-replace-only-development



動作:.babelrc

{

"plugins": [
[
"babel-plugin-replace-only-development",
{
"rules": {
"https://api.example.com": "http://localhost:3000"
},
}
]
]
}



動作: Before

import axios from 'axios'

axios.get('https://api.example.com')



動作: After

import axios from 'axios'

axios.get('http://localhost:3000')



使いみち



どうでもいいものを作ったけどローカルとデプロイ時でAPI ROOTを変えたいけど設定を管理するのがだるい時



まれによくある



replaceしかしてない簡単構成



作りかた



作りたいものを決める


  • 例えばconsole.logリムーバーとか

  • console.logをxhrに置き換えてロギングしたくない?とか

  • そういうやつ



おもむろにbabelプラグインの初期設定をする


  • babelプラグインなら構文パーサーとかがデフォでついてくるからしんどくない

  • CLIインターフェースとかオプションとかをbabelのシステムに依存できるので楽

  • 今回のサンプルプラグインはyarn initからはじめてて本当に最小限なので使ってみてくれ!



構文として何に属するかを調べる



ASTエクスプローラー

Screen Shot 2018-02-20 at 3.18.23.png



プラグインのテンプレを流用

const { transform } = require('@babel/core')

const plugin = ({types: t}, options) => {
return {
visitor: {
Literal (path, file) {
// Literalなのでここに書く
}
}
}
}

module.exports = plugin



Babel Plugin Handbookをみて欲しいのを調べる



書く

// ...

Literal (path, file) {
Object.entries(options.rules).forEach(([before, after]) => {
if (path.get('literal').container.value == before) {
path.replaceWith(t.stringLiteral(after))
}
})
}
// ...



完成


Screen Shot 2018-02-20 at 2.56.08.png


Screen Shot 2018-02-20 at 2.56.08.png


Screen Shot 2018-02-20 at 2.56.08 3.png



やってみたい人へ



4つのTips



1. babelプラグインにするとJSのパーサーを用意しないでいいので楽



2. ASTエクスプローラーとHandbookがあれば2秒でできそうと思うことは20分あればできる



3. とりあえずASTって構文の木があるんだ〜ぐらいの気持ちで雑にはじめる



4. 置き換える系はTypeを調べてreplaceWithだけで倒せるから楽



参考になった資料



参考になった資料



まとめ



まとめ


  • babelプラグインにするとJSのパーサーを用意しないでいいので楽

  • 資料は無茶苦茶あるので誰でもはじめの一歩は作れる

  • ASTエクスプローラーがないと人権がないので頑張る

  • Qiitaとかにも意外と記事はあるので有効活用すべし


    • ちなみにwebpack pluginをやろうと思ったらそっちはなさすぎたのでブルーオーシャン



  • Typeさえわかればあとは割りと泥臭い作業っぽい



やってみよう