作成
vue create の背後には多くのパラメータがあります。
ソースコードは次のとおりです。
program
.command('create <app-name>')
.description('create a new project powered by vue-cli-service')
.option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset')
.option('-d, --default', 'Skip prompts and use default preset')
.option('-i, --inlinePreset <json>', 'Skip prompts and use inline JSON string as preset')
.option('-m, --packageManager <command>', 'Use specified npm client when installing dependencies')
.option('-r, --registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
.option('-g, --git [message]', 'Force git initialization with initial commit message')
.option('-n, --no-git', 'Skip git initialization')
.option('-f, --force', 'Overwrite target directory if it exists')
.option('--merge', 'Merge target directory if it exists')
.option('-c, --clone', 'Use git clone when fetching remote preset')
.option('-x, --proxy', 'Use specified proxy when creating project')
.option('-b, --bare', 'Scaffold project without beginner instructions')
.option('--skipGetStarted', 'Skip displaying "Get started" instructions')
.action((name, cmd) => {
const options = cleanArgs(cmd)
if (minimist(process.argv.slice(3))._.length > 1) {
console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'))
}
// --git makes commander to default git to true
if (process.argv.includes('-g') || process.argv.includes('--git')) {
options.forceGit = true
}
require('../lib/create')(name, options)
})上記のコードから、パラメーターの後に vue create が続くことが明確にわかります。
vue createの実行プロセス
vue 作成 ===>
作成.js ===>
Creator.js ===>
プリセットがある場合 プリセットをロード ===>
OS モジュールはシステム一時フォルダーを作成します ( OS モジュールはいくつかの基本的なシステム操作機能を提供します) ===>
リモート プリセットがあります。download -git-repo を使用してウェアハウスをダウンロードします ===>
一時フォルダーからコンテンツを取得し、実際のフォルダーに書き込みます (fs モジュールによって操作されます)
vue-cli-サービス
vue-cli-service は、create-react-app の反応スクリプトに似ており、プロジェクトのパッケージ化、起動、その他のコマンドをこのコマンドに統合します。ソース コード内の対応するパッケージは、packages/vue/cli-service です。
図に示すように:
エントリ ファイルは Service.js を指します。
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
boolean: [
// build
'modern',
'report',
'report-json',
'inline-vue',
'watch',
// serve
'open',
'copy',
'https',
// inspect
'verbose'
]
})
const command = args._[0]
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
サービス.js
constructor() のインスタンス化を実行 ===>
this.pkg = this.resolvePkg(pkg) ===>
this.plugins = this.resolvePlugins(plugins, useBuiltIn) ===>
インスタンスサービス.run()
解決Pkg(パッケージ)
pkg current コマンドが実行されるディレクトリである、resolvePkg (pkg) を介して package.json を解析します。
戻り値はpackage.jsonのパスです
解決プラグイン
1. コマンドの下にコマンド ファイルをロードし、次のようにフォーマットします。
[
{
id:'built-in:文件路径',
apply: '命令文件'
}
]2. 依存関係と devDependency にプラグインがある場合は、それらを現在のプラグイン配列に追加します。
プラグインの有無を判断するルール：
id は次の正規表現を満たす
/^(@vue\/|vue-|@[\w-]+(\.)?[\w-]+\/vue-)cli-plugin-/this.pkg.optionalDependency の ID
3. ローカルプラグインをロードする
存在するかどうかを確認します: this.pkg.vuePlugins && this.pkg.vuePlugins.service
フォーマット：
[
{
id: `local:${file}`,
apply: loadModule(`./${file}`, this.pkgContext)
}
]走る
run の vue-cli-service パラメータに従って対応するコマンド ファイルを取得し、コマンド ファイルの機能を実行します
serve.jsの実行プロセスを分析する
webpack 設定、chainWebpack 経由でインポート
webpack設定ファイル
実行メソッド
ここで難しいのは、 registerCommand が定義されている場所であり、これはソース コードを分析することで取得できますが、次の図に示すように、メソッド registerCommand() メソッドが PluginApi で定義されています。
次のコードの this.service は Service インスタンスを指します
ここでコマンドを実行する前のロジックは基本的に完成しており、次のステップはコマンドを実行することです。