banner
飞天御剑流

飞天御剑流

前端,jAVAsCRIPT
github

uniappのソースコードの読み方(tsのコンパイル方法)

コードを dev ブランチにプル
この記事は、この 932a3ca2db739dbf76a281c6548ac169b53fac98 の git コミットハッシュから読み取ります
まず、パッケージマネージャーを見てみましょう。使用しているのは yarn です
image
yarn install で依存関係をインストールします
pkg.json ファイルを開きます
コードを見るのはテストから始めるのが好きです。どのように実行されるかを見てみましょう
image
テストを実行するには、testを実行します
ts ファイルがある場所を見つける必要があります。どのように起動されるかを見てみましょう
テストの対象ファイルは、このディレクトリの packages/uni-template-compiler にあります
エントリーポイントはここです lib/index.js

このパッケージでは、vue-template-compiler、つまりテンプレートファイルのコンパイルに使用される vue が参照されています

image

vue-cli-plugin-uni はメインエントリーポイントです
index.js

chain webpack の設定
vue-cli-plugin-uni/lib/chain-webpack.js

webpack の設定
vue-cli-plugin-uni/lib/configure-webpack.js
次にエントリーポイントを確認します

このファイル
vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js

image

vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js
このファイルでは、vue の main.js ファイルの内容が処理されています

vue-cli-plugin-uni/packages/webpack-preprocess-loader/preprocess/lib/preprocess.js
このファイルでは、より具体的な preprocess メソッドのコンパイルが行われます

vue-cli-plugin-uni/lib/env.js は、コンパイルの開始時に使用されます

// コンパイル中の vue テンプレートファイル
uni-template-compiler/lib/index.js

// HBuilderXで実行中 vue-cli-plugin-uni\lib\env.js
runByHBuilderX && console.log(uniI18n.__('compiling'))
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。