Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

背景

会社のプロジェクトでは、新しい要件に遭遇するたびに、新しいページの作成 => Vue テンプレートなどのページにコンテンツを追加 => ルーティングを追加するという手順をまだ使用していますか。面倒だと思いませんか?もしそうなら、自動ビルドを試してみてはいかがでしょうか? とても良いですよ!

element-ui の自動構築はどのように機能しますか?

オープンソース プロジェクト、特に UI ライブラリの開発では、協力する人が多すぎて、コーディングの習慣がそれぞれ異なります。さらに、UI ライブラリの各コンポーネントには、多言語、ユニット テスト、ルーティング、コンポーネントの readme.md ドキュメントなどのファイルも含まれます。そのため、毎回ゆっくりと作成するのは面倒ですし、ルーティングファイルなどの公開ファイルを複数の人が変更すると、多くの競合が発生します。そのため、オープンソース プロジェクトには、特定のファイルを自動的に生成するスクリプトが数多く存在します。

メイクファイル

element-ui プロジェクトのルート ディレクトリに makefile があります。各コマンドの機能はコメントに記載されています。 Windows ユーザーは、ダウンロードするスクリプトを実行するために make コマンドを使用する必要があります。 Mac ユーザーには必要ありません。

@# デフォルトの #comment はログに出力されますが、@# は出力されません。PHONY の役割: 以下のスクリプト コマンドの dist および test ディレクトリとの競合のチェックを無視します。つまり、コマンドはとにかく実行されます。PHONY: dist test

@# makeコマンドを実行すると、デフォルトでヘルプスクリプトが実行されます: help

@# `make build-theme` を実行すると、`npm run build:theme` スクリプトが実行されます。
@# : 実行するコマンドはコロンの前であり、コロンの後の最初の行はタブで、その後にスクリプトコマンド @# が続きます。つまり、以下は 'tab+npm npm build: theme' です。
# すべてのテーマをビルドする
@# 上記のビルド テーマのコメントは以下のスクリーンショットに表示され、build-theme がログに出力されます。 
 npm 実行ビルド:テーマ
インストール:
 npmインストール
開発者:
 npm 実行 dev
@# $() は使用する関数です @# $@ は現在のコマンド自体です。たとえば、'make new' の場合、$@ は new です
@# MAKECMDGOALS 特殊変数。コマンドラインパラメータで指定されたターゲットリストを記録します。つまり、この変数を使用して、コマンドラインパラメータを取得できます。@# たとえば、新しいコンポーネントを作成する場合は、スクリプト `make new wailen` を使用します。MAKECMDGOALS は wailen に等しくなります。
@# フィルターアウトアンチフィルター関数、$(MAKECMDGOALS) 内の $@ を含むすべてのコンテンツをフィルターアウトします @# new.js の内容と組み合わせると、以下のスクリプトの意味は、新しいコンポーネントを作成し、コンポーネント名を渡すことです。コンポーネント名は new にすることはできません。コンポーネント名が new の場合、以下のスクリーンショットのように new が表示されます。
 ノードビルド/bin/new.js $(フィルターアウト$@、$(MAKECMDGOALS))
@# 一部のスクリプトは省略されています。興味のある方は、ソースコードのヘルプを確認してください。
 @echo " \033[35mmake\033[0m \033[1mコマンド命令\033[0m"
 @echo " \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 依存関係をインストールします"
 @echo " \033[35mmake new <コンポーネント名> [中国語名]\033[0m\t--- 新しいコンポーネント パッケージを作成します。たとえば、'make new button button'"
 @echo " \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 開発モード"
 @echo " \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- プロジェクトをコンパイルし、ターゲット ファイルを生成します"
 @echo " \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- デモをデプロイ"
 @echo " \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- npm に公開"
 @echo " \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t--- サイトに新しい言語を追加します。たとえば、'make new-lang fr'"

# コメント出力

新しいキーワードをフィルタリングします。受信パラメータが新しい場合は、それをフィルタリングします。

もちろん、make を使用したくない場合は、node スクリプトを直接実行することもできます。たとえば、make の新しいコンポーネント名は、node build/bin/new.js のコンポーネント名と同じです。

新しい.js

new.js は自動化のコア ファイルです。まず考えてみましょう。コンポーネント ファイルの作成は、たった 2 つのステップで済みます。

  • ファイルを作成する
  • コンテンツを追加

ファイル保存

主にファイル保存パッケージを通じてファイルを作成し、コンテンツを追加します。まずはAPIを見てみましょう

const fileSave = require('file-save');
const コンテンツ = "const fs = require('fs');"
const callback = () => { console.log('スクリプト実行') }
fileSave('ファイルパス')
   .write('上記のようなファイルコンテンツ', 'utf8', callback) // コンテンツの書き込みが成功すると、コールバックがトリガーされます。write('コンテンツの追加を続行', 'utf8')
   .end('\n') // ファイル操作は空行で終了します

これにより、次のファイルが生成されます

詳しいドキュメントについては、file-saveを参照してください。

element-ui では、作成する必要があるファイル名とコード コンテンツを管理するために、Files 配列オブジェクトが使用されます。

このように、Files を直接ループすることで、対応するファイルを作成できます。

// パッケージを作成する
// コンポーネント生成ディレクトリ const PackagePath = path.resolve(__dirname, '../../packages', componentname);
Files.forEach(ファイル => {
  fileSave(path.join(PackagePath, file.filename))
    .write(ファイル.content, 'utf8')
    .end('\n');
});

参照リソースファイルの変更

さらに、コンポーネントを作成した後は、通常、ルーティング構成ファイルなど、コンポーネントを参照する必要がある対応する場所を変更する必要があります。ファイル保存を通じて対応するルートを追加することもできます。ファイル保存自体は以前のファイルの内容が上書きされ、削除後に再生成されます。したがって、元のコンテンツに追加したい場合は、元のファイルのコンテンツを取得してから、新しいコンテンツを追加する必要があります。次のことが可能です:

const fileSave = require('file-save');
定数 fs = require('fs');

const content = `const fileSave = require('file-save'); `
const oldCode = fs.readFileSync('./demo.js')
ファイル保存('demo.js')
  .write(古いコード+コンテンツ、'utf8')
  .end('\n')

つまり、fs モジュールを通じてファイルの古い内容を読み取り、それを結合します。 Element-ui はこれを実行します:

fs.createWriteStream

ファイル保存の原則は、fs.createWriteStream API をカプセル化することです。
使い方を簡単に説明する

定数 fs = require('fs')

//<stream.Writable> から継承した書き込み可能なストリーム fs.WriteStream クラスのオブジェクトを作成します。
const writer = fs.createWriteStream('createStream.js', { // ファイルを検索し、存在しない場合は作成します // デフォルト値は w です。writer.write メソッドを呼び出してデータを書き込むと、ファイルのすべての内容が直接上書きされます。
    // これにより、ファイルの以前の内容がすべて削除され、新しいデータが書き込まれます。フラグ: 'w'
})


//ストリームにデータを書き込む writer.write('このファイルの新しい内容')

file-save のソース コードは、以下の疑似コードで確認できます。

定数 savefs = {}
savefs._create_dir = 関数 (fp, opts) {
  mkdirp.sync(fp, opts);
}
savefs.wstream = 関数 (ファイル) {
  var ws = fs.createWriteStream(ファイル);
  this.writer = ws;
  これを返します。
}
savefs.write = function(チャンク、エンコーディング、cb) {
  ...
}

savefs.end = function(チャンク、エンコーディング、cb) {
  ...
}

savefs.finish = 関数(cb) {
  ...
}

savefs.error = 関数(cb) {
  ...
}
エクスポート { savefs }

もちろん、Node の fs.writeFile API を使用してファイルを直接作成することもできます。

fs.writeFile('ファイルパス', '書き込むコンテンツ', ['エンコーディング'], 'コールバック関数');

パラメータはfile-saveと同じであることがわかります。

要約する

結局のところ、自動コンポーネント作成は、2 つのコア作成ファイルにコンテンツを追加することにすぎません。これら 2 つの操作は、ファイル保存パッケージを通じて実行できます。その後、生成されたファイルのパスと内容を独自のビジネスと組み合わせて構成し、一部のパブリック ファイルの参照を新しいファイル リソースに変更することができます。 Node でスクリプトを書くことは、バックエンドを書くよりもはるかに面白いと思いますか?

エレメントスクリプトを使用して新しいコンポーネントを自動的に構築する実装例に関するこの記事はこれで終わりです。エレメントスクリプトを使用して新しいコンポーネントを自動的に構築する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue Element に基づいてカスタムツリーを構築するためのサンプルコード

<<:  純粋な CSS ドロップダウン メニュー

>>:  モバイルデバイス Web 開発における HTML ヘッドの書き方

推薦する

Vue3.0 でページング コンポーネントを手動でカプセル化する方法

この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...

ブラウザ(IEシリーズ)を判別するための条件付きコメント

<!--[if IE 6]> IE6 のみが認識可能 <![endif]-->...

パスワードログインなしのLinux構成スタンドアロンおよびフルディストリビューションの詳細なチュートリアル

目次1: 単一マシンのパスワードフリーログイン構成1. 仮想マシンのホスト名を設定する2. 仮想マシ...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...

新しい CSS :where および :is 疑似クラス関数とは何ですか?

:is と :where とは何ですか? :is()と:where()は、セレクターを作成するとき...

MySQLを定期的にバックアップしてQiniuにアップロードする方法

ほとんどのアプリケーション シナリオでは、緊急時に備えて重要なデータをバックアップし、安全な場所に保...

Centos8 システムの VMware インストール チュートリアル図 (コマンド ライン モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

ウェブページデザインのための4つの実践的なヒント

関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...

HTML の一般的でないタグ optgroup、sub、sup、bdo のサンプルコード

Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...

フレームウィンドウ間の関連付けとハイパーリンクのターゲット属性の使用を実装する方法

フレーム ウィンドウの関連付けを実現するには、次に示すように、ハイパーリンクの「ターゲット」ウィンド...

CSS3 を使用した背景ぼかし効果の 3 つの例

導入から始めず、いきなり本題に入りましょう。通常の背景ぼかし効果は次のとおりです。 プロパティを使用...

VmWareでcentos7をインストールするときにインターネットにアクセスできない問題の解決策

Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...

MySQL データベースのパフォーマンス最適化の概要

目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...

フロントエンドの面接でよく聞かれる JavaScript の質問の完全なリスト

目次1. 手書きのインスタンス2.配列のマップメソッドを実装する3. Reduceは配列のmapメソ...