이 슬라이드는 「JavaScript 메타프로그래밍 공부회@사쿠라 인터넷 metapro.es」의 LT 자료입니다.

소개

메타 프로그래밍 굉장한

런타임 주입이라면 Ruby나 PHP, JS로 상당히 간단하게 할 수 있다

주입이라면 쉽게 할 수 있습니다.

하지만 검은 마술이되기 쉽고 실제 제품 개발로 해내면 아무래도 취급하기 어렵습니다.

타인이 쓴 메타프로 생성 코드를 보았을 때

🤔🤔🤔🤔🤔

🙄

정적 해석 굉장한

하지만 모르겠어!

라는 사람을 위한 첫걸음

자기소개

메타 프로그래밍 모르겠어요

내가 알게 되기 위해 알고 있는 사람을 불러 공부회를 열었다

왜 말하는가?

"자신의 QoL을 높이는 정도라면 의외로 누구나 플러그인을 쓸 수 있어"라고 말하고 싶으니까

만든 것

process.env.NODE_ENV가 production이 아닌 경우 설정된 문자를 대체하는 플러그인

https://기주 b. 키 m / Potato 4d / Babel P ぅ 긴-p ぁ세온 ly- ゔ ぇ p 맨 t

동작:.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 밖에 하지 않는 간단한 구성

만드는 법

만들고 싶은 것을 결정

재밌게 babel 플러그인의 초기 설정하기

구문으로 무엇에 속하는지 알아보기

AST 탐색기

플러그인의 템플리를 유용

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))
          }
        })
      }
// ...

완성

하고 싶은 사람에게

네 가지 팁

1. babel 플러그인으로 하면 JS 파서를 준비하지 않아도 되므로 편하게

2. AST 탐색기와 Handbook이 있으면 2초에 할 수 있다고 생각하는 것은 20분 있으면 할 수 있다

3. 우선 AST는 구문 나무가 있어~정도의 기분으로 어색하게 시작한다

4. 대체하는 시스템은 Type을 조사하고 replaceWith만으로 쓰러 뜨릴 수 있기 때문에

참고가 된 자료

참고가 된 자료

요약

요약

해보자