Vue.JSコンポーネントでの楽な修正のために、Vue Service Bayに会いましょう。この軽量でありながら強力なツールを使用して、開発パイプラインを手動でリファクタリングし、加速して、退屈な手動のリファクタリングに別れを告げます。
リファクタリングは、一般に、増分または卸売の2つのアプローチのいずれかに従います。選択するアプローチは、プロジェクトによって異なります。たとえば、コードベース全体に新しい設計システムを一度に適用する必要がある場合、このツールは非常に貴重です。マシンは、人間よりもはるかに速く、より正確に単純なタスクを実行できます。このライブラリでリファクタリングタスクを自動化すると、効率と精度が大幅に向上します。このリポジトリは、そのようなリファクタリングをvue.jsコンポーネントに適用するためのツールを提供します。
次のフローチャートは、このリポジトリとワークフローとの相互作用を簡素化します。
フローチャートLR
サブグラフVue Service Bay
V1 [Vueファイルを読む] - > V2 [セクションごとに分割]
V2 [セクションごとに分割] - > v3 [ASTへの解析]
v4 [ast to vueファイル]
終わり
サブグラフユーザーランドのコード
v3-> u1 [asttを操作]
u1-> v4
終わり
AST（要約構文ツリー）を操作するのが初めてであっても、このリポジトリはあなたを始めるための多くの例を提供します。
このツールを試すには、リポジトリをクローンします。
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 difftool開発ベイを開発者の依存関係としてインストールします。
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は、プログラムコードの構造を表すためにコンパイラが広く使用しているデータ構造です。
このライブラリは、リファクタリングにASTSも使用しています。簡単に言えば、プログラムはASTに変わり、ASTが操作され、再びプログラムに書き戻されます。
幸いなことに、ASTを簡単に理解するためのツールがあります。それはASTエクスプローラーです。
ASTエクスプローラーを使用して、どこにでもクリックすると、対応するASTに自動的にジャンプできます。これにより、処理するノードとその親を含む周囲のノードに関する情報を簡単に確認できます。
最後に、各言語のASTを表示する方法について説明します。
HTMLパーサーにはhtmlparser2使用します。このライブラリの元の実装の時点で、 htmlparser2 、HTMLにASTを正しく書き戻すことができる唯一の主要なパーサーでした。
htmlparser2によって解析されたASTSを表示するには、ASTエクスプローラーでHTML言語とhtmlparser2選択します。
JavaScript / TypeScriptパーサーにrecastを使用します。このライブラリの元の実装の時点で、 acorn ASTをHTMLに正しく書き戻すことができる唯一の主要なパーサーでした。私たちは最初にAcornを試しましたが、Acornがコメントを無視しているため、採用できませんでした。また、TypeScriptをサポートしたかったので、ついにrecastを選択しました。また、JavaScriptをTypeScriptとして解析します。これは、TypeScriptがJavaScriptのスーパーセットであるためです。
recastによって解析されたASTSを表示するには、JavaScript言語を選択し、ASTエクスプローラーでrecast 。 [構成]ボタンを押し、 typescriptをパーサーとして選択します。
CSS / SCSSパーサーにpostcss使用しています。
PostCSSで解析されたASTを表示するには、ASTエクスプローラーでCSSとpostcss選択します。
Vue Service Bayは、AST操作を必要としない移行のために、あらゆる言語とともに使用できます。ただし、ASTを使用している場合、次の言語が現在サポートされています。他の言語のサポートを追加したい場合は、PRをお気軽に送信してください。
<template><Script><Style>私たちは常に問題に対してオープンで、リクエストを引き出しています。あなたの貢献は、VueserviceBayをすべての人にとってより良いツールにするのに役立ちます。
問題やリクエストを歓迎しますが、アクティブなメンテナンス時間は限られています。機能要求がある場合、または大幅な変更が必要な場合は、プルリクエストの送信を強くお勧めします。
