이 기사는 무엇입니까?

지난번 의 기사로 작성해 본, 자작한 babel plugin 을 사용해 s2s 에서의 코딩 타임 컴파일을 시험해 보았습니다.

덧붙여 자신이 이번 포스트로 하고 싶은 것의 내용에 대해서는, 아래와 같은 Qitta 포스트를 참조해 주세요.
나는 이 기사를 보고, 코딩 타임 컴파일에 매료되어 babel plugin을 자신이라도 쓰려고 생각했던 것이었다.

안녕 보일러 플레이트. s2s로 빠른 redux 애플리케이션 구축

앞으로의 시대의 메타 프로그래밍 JavaScript의 정의를 이야기합시다.

실제로 만들어본 샘플

추가 (테스트 코드 생성도 가능합니다)

테스트 코드는 mocha 를 사용하는 전제의 것을 생성합니다.

이 gif 동영상 재현 절차

재현하기 위한 코드는 Github에 올리고 있습니다.

신신 86 / try-s2s - ゔ x - 201801

# githubからclone
git clone https://github.com/shinshin86/try-s2s-vuex-201801.git

# プロジェクトに移動
cd try-s2s-vuex-201801

# 依存関係インストール
yarn

# Atom起動(別にAtomじゃなくても良い)
atom .

# s2s起動
yarn run s2s

try-s2s-vuex-201801/src/store 에 있는 mutation-types.js 를 일단 삭제하고,
친숙한 index.js 내의 모든 설명을 삭제 한 후,import { ADD, DONE, DELETE } from './mutation-types' 등과 index.js에 쓰고 저장하면 s2s 측에서 변경을 감지하고 코드 생성을 실시합니다.

현재와 ​​TODO

아직, 실제로 자신이 쓴 plugin을, s2s측으로부터 처리할 수 있을까를 검증해 본 단계이므로, 상기 이외의 순서로 하면 에러가 나오거나, 이중으로 코드가 생성되기도 합니다. . .
그리고, 우선은 실현 우선으로 코드 쓰기 어수선하고 있기 때문에, 코드 더럽습니다.
⇒이중 생성에 대해서는 대응했습니다. 추가에 기재되어 있습니다.

후일, 기능 수정이나 코드를 정돈해가면서, 계속해서 코드 생성을 체감해 가려고 생각합니다.
아니 - 하지만 이렇게, 실제로 s2s를 사용하여 코드를 생성할 수 있으면 텐션 올라가네요. . . 재미있는!

추가:

이중으로 코드가 생성되는 문제에 대응했습니다.

하지만, 예를 들면 import { ADD, DONE } from './mutation-types' 를 import { ADD, DONE, DELETE } from './mutation-types' (으)로 수정해도, DELETE 만이 새롭게 추가되는 것은 아니고 (진짜는 이것을 목표로 하고 싶다), 아무것도 변경은 발생하지 않습니다.

다시 수정한 import 부분을 반영하기 위해서는 한번 생성하고 있다 state , actions , mutations , getters 있습니다.
(자동으로 생성된다.

코코 라헨의 제어를 좋은 느낌으로 하고 싶습니다만,,, 이것에 대해서는 향후의 과제로 합니다.