Vue.js 구성 요소의 손쉬운 대량 수정을 위해 Vue Service Bay를 만나십시오. 이 경량의 강력한 도구로 지루한 수동 리팩토링에 작별 인사를하고 개발 파이프 라인을 가속화하십시오.
리팩토링은 일반적으로 두 가지 접근법 중 하나 인 증분 또는 도매입니다. 선택한 접근 방식은 프로젝트에 따라 다릅니다. 예를 들어, 전체 코드베이스에서 새로운 설계 시스템을 한 번에 적용 해야하는 경우이 도구는 매우 중요합니다. 기계는 인간보다 훨씬 빠르고 정확하게 간단한 작업을 실행할 수 있습니다. 이 라이브러리로 리팩토링 작업을 자동화하면 효율성과 정확성이 크게 향상됩니다. 이 저장소는 Vue.js 구성 요소에 이러한 리팩토링을 적용하는 도구를 제공합니다.
다음 유량 차트는이 저장소와 워크 플로의 상호 작용을 단순화합니다.
흐름도 LR
하위 그래프 vue 서비스 베이
v1 [vue 파일 읽기]-> v2 [섹션별로 분할]
v2 [섹션별로 분할]-> v3 [AST로 구문 분석]
v4 [ast to vue 파일]
끝
서브 그래프 사용자 토지 코드
v3-> u1 [조작 ast]
U1-> V4
끝
AST (Abstract Syntax Trees) 조작을 처음 사용 하더라도이 저장소는 시작하기위한 많은 예를 제공합니다.
이 도구를 시험해 보려면 저장소를 복제하십시오.
git clone [email protected]:flyle-io/vue-service-bay.git
cd vue-service-bay
npm install
cd packages/examples
node migration/index.js
# Check the migration results however you like!
git difftoolVue Service Bay를 개발자 종속성으로 설치하십시오.
npm i -D vue-service-bay -D 플래그는 패키지를 개발 종속성으로 설치합니다.
먼저 마이그레이션 러너 스크립트를 만들어야합니다. 자세한 내용은 예제의 index.js를 참조하십시오.
다음으로 특정 마이그레이션 로직을 구현해야합니다. 자세한 내용은 예제를 참조하십시오.
(Magicstring은 ASTS를 변경하는 편리한 방법입니다. 자세한 내용은 https://github.com/rich-harris/magic-string을 방문하십시오)
마이그레이션 러너 스크립트 실행 :
node index.jsAST는 처음 시청자에게 복잡하고 기괴합니다. 반면에 AST를 마스터 할 수 있다면 리팩토링 및 기타 언어 처리 프로그래밍을위한 훌륭한 무기가 될 수 있습니다. 여기서 우리는 간단한 방식으로 AST를 이해하는 방법을 설명 할 것입니다.
첫째, 프로그래밍 언어는 종종 이해가 용이하게 추상 구문 트리 (AST)로 취급됩니다. AST는 컴파일러가 프로그램 코드의 구조를 나타 내기 위해 널리 사용하는 데이터 구조입니다.
이 라이브러리는 또한 리팩토링을 위해 AST를 사용합니다. 간단히 말해서, 프로그램은 AST로 바뀌고 AST는 조작되어 프로그램에 다시 작성됩니다.
다행히도 AST를 쉽게 이해할 수있는 도구가 있습니다. 그것은 ast 탐색기입니다.
AST Explorer를 사용하면 어디서나 클릭하여 해당 AST로 자동 이동할 수 있습니다. 이를 통해 처리하려는 노드와 부모를 포함한 주변 노드에 대한 정보를 쉽게 찾을 수 있습니다.
마지막으로, 우리는 각 언어에 대한 AST를 보는 방법을 설명 할 것입니다.
우리는 HTML 파서에 htmlparser2 사용합니다. 이 라이브러리의 원래 구현 당시 htmlparser2 html에 ASTS를 올바르게 쓸 수있는 유일한 주요 파서였습니다.
htmlparser2 가 구문 분석 한 ASTS를 보려면 AST 탐색기에서 HTML 언어 및 htmlparser2 선택하십시오.
JavaScript / TypeScript Parser에 대한 recast 사용합니다. 이 라이브러리의 원래 구현 당시 acorn HTML에 ASTS를 올바르게 쓸 수있는 유일한 주요 파서였습니다. 우리는 먼저 도토리를 시도했지만 도토리가 의견을 무시하기 때문에 그것을 채택 할 수 없었습니다. 우리는 또한 TypeScript를 지원하고 싶었으므로 마침내 recast 선택했습니다. 또한 JavaScript를 TypeScript로 구문 분석합니다. TypeScript는 JavaScript의 슈퍼 세트이기 때문입니다.
recast 로 구문 분석 된 ASTS를 보려면 AST Explorer에서 JavaScript 언어를 선택하고 recast . 구성 버튼을 누르고 파서로 typescript 선택하십시오.
우리는 CSS / SCSS 파서에 postcss 사용합니다.
PostCSS 가 구문 분석 한 ASTS를 보려면 AST 탐색기에서 CSS 및 postcss 선택하십시오.
VUE Service Bay는 AST 조작이 필요하지 않은 마이그레이션에 모든 언어와 함께 사용할 수 있습니다. 그러나 AST를 사용하는 경우 다음 언어가 현재 지원됩니다. 다른 언어에 대한 지원을 추가하려면 PR을 제출하십시오.
<template><Script><Style>우리는 항상 문제와 요청을 시작합니다. 귀하의 기여는 VueserviceBay를 모든 사람에게 더 나은 도구로 만드는 데 도움이됩니다.
문제를 환영하고 요청을 당기는 동안 활성 유지 보수 시간은 제한적입니다. 기능 요청이 있거나 상당한 변경이 필요한 경우 풀 요청을 제출하는 것이 좋습니다.
