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 が参照されており、テンプレートファイルのコンパイルに使用されています

image

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

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'))
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。