彼らとVUE CLI本当に、快適で便利で時間の保存が、彼はあなたがNPMの実行を実行した後、全体のプロジェクトが稼働中でどのように彼も知りませんでした何/ビルドを提供し、今日の自分、パッケージの層を通って見ることは難しいですここに、レコード録音を深め、チョウチョウに行くには時間がかかります
記事のディレクトリ
まず、実際の運転NPMの実行背後を探ります
1、サーブNPMの実行を見てみましょう
選択npm run serveスタート、全体がこのコマンドを実行した後に仕えるの背後にあるキーの値にスクリプトpackage.json、実行され、非常に精通している必要があります
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
実際には、このコマンドの実際の実装があるnpm run vue-cli-service serveコマンド、これは、我々は、テストにテストのためのテストを追加することを意図するものです
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test":"echo hello vue "
},
コマンドが実行で再度実行して、次の印刷を参照してください
D:\YLKJPro\fgzs>npm run test
> sdz@0.1.0 test D:\YLKJPro\fgzs
> echo hello vue
hello vue
実際には、その後、テストエコーの後ろに行ってnpm run vue-cli-service serve仕えるの後ろには、それをしているのですか？で見てみましょう
D:\YLKJPro\fgzs>npm run test serve
> [email protected] test D:\YLKJPro\fgzs
> echo hello vue "serve"
hello vue "serve"
実際には、パラメータの裏など
2、偽aはサーブ
あなたが信じていない場合は、（偽のサーブ）のテストを見てみましょう
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test":"my-npm-test serve"
},
NPMの実行テストは、次の出力を行いました
D:\YLKJPro\fgzs>npm run test
> [email protected] test D:\YLKJPro\fgzs
> my-npm-test serve
serve
ねえ、奇妙な、それを印刷する方法を果たす、私はエコーを使用しませんでしたか？実際に、私は、元のスクリプトを真似ました
2-1。テストフォルダを作成します。
binディレクトリのjsの下のディレクトリを作成して、テストを作成し
、以下のように、このテストは非常に単純なjsのあることは、受信したパラメータをプリントアウトすることです：
#!/usr/bin/env node
const rawArgv = process.argv.slice(2)
console.log(rawArgv[0])
2-2。node_modules / .binファイルでテストスクリプトを作成します。
LinuxとWindowsは、（私の-NPM-テストと私の-NPM-test.cmdの）シェルスクリプトを追加して
、実際には目標のJSの一部の内側にパスを
2-3。私の-NPM-テストを追加します。
我々高度試験
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../mytest/bin/my-npm-test.js" "$@"
ret=$?
else
node "$basedir/../mytest/bin/my-npm-test.js" "$@"
ret=$?
fi
exit $ret
2-4。私の-NPM-test.cmdの追加
私-NPM-TEST.CMD側の窓のために
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\mytest\bin\my-npm-test.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\mytest\bin\my-npm-test.js" %*
)
ここで最後にNPMにいくつかの理解を実行します。
実際には、NPMのヘルプの実装はまた、対処したい公式の説明を実行します
2-5。原理実行
使用NPM実行スクリプトスクリプトの実行時間は、シェルを作成し、シェルで指定されたスクリプトを実行します。
この実行可能なシェルは、ときにそれを復元するために、別の後に実行した後、環境変数パスに追加し、現在のプロジェクトのディレクトリ（つまりnode_modules / .binファイル）に依存します。このスクリプトのコマンド名は、直接パスを追加することなく、対応するスクリプトを下回るnode_modules / .binファイルを見つける依存します。
2-6。サーブNPMの実行を探るTELL
さて、最後にそれが来るかのようにちょっとだから今、NPMの実行が実際には、これはすでに終了し、関連するものを提供していない、NPMの実行がとても神秘的ではないことを知って、私は慎重に考えて、npm run serve=== npm run vue-cli-service serve、そうnode_modules.binここでは、2つのVUE-CLI-サービスファイル、見た目がなければなりません。。。
確かに、その後、オープン一見、何彼最終的にJS実行はい。ファイルが開いている
JSがパスに以下の見つけることができます
[OK]を、最終的に我々は、この文書は、それをやった、プロジェクトがスタートして、真のパフォーマーを見つけましたか？
第二に、このプロジェクトは、詳細なコンパイルされています
私たちは、オープンVUE-CLI-service.jsを（コードがhttps://segmentfault.com/a/1190000017876208直接ギャングのブログによって、詳細に説明トレッキングされていません）
1、上VUE-CLI-service.js
const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node
// 检测node版本是否符合vue-cli运行的需求。不符合则打印错误并退出。
if (!semver.satisfies(process.version, requiredVersion)) {
error(
`You are using Node ${process.version}, but vue-cli-service ` +
`requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
)
process.exit(1)
}
// cli-service的核心类。
const Service = require('../lib/Service')
// 新建一个service的实例。并将项目路径传入。一般我们在项目根路径下运行该cli命令。所以process.cwd()的结果一般是项目根路径
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',
'watch',
// serve
'open',
'copy',
'https',
// inspect
'verbose'
]
})
const command = args._[0]
// 将我们执行npm run serve 的serve参数传入service这个实例并启动后续工作。(如果我们运行的是npm run build。那么接收的参数即为build)。
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
最後の呼び出し上記のjsの../lib/Service実行では、プロジェクトをビルドするために、あなたはで見ることができるService.jsと行って
Service.js上の2、
// ...省略import
module.exports = class Service {
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
process.VUE_CLI_SERVICE = this
this.initialized = false
// 一般是项目根目录路径。
this.context = context
this.inlineOptions = inlineOptions
// webpack相关收集。不是本文重点。所以未列出该方法实现
this.webpackChainFns = []
this.webpackRawConfigFns = []
this.devServerConfigFns = []
//存储的命令。
this.commands = {}
// Folder containing the target package.json for plugins
this.pkgContext = context
// 键值对存储的pakcage.json对象，不是本文重点。所以未列出该方法实现
this.pkg = this.resolvePkg(pkg)
// **这个方法下方需要重点阅读。**
this.plugins = this.resolvePlugins(plugins, useBuiltIn)
// 结果为{build: production, serve: development, ... }。大意是收集插件中的默认配置信息
// 标注build命令主要用于生产环境。
this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
return Object.assign(modes, defaultModes)
}, {})
}
init (mode = process.env.VUE_CLI_MODE) {
if (this.initialized) {
return
}
this.initialized = true
this.mode = mode
// 加载.env文件中的配置
if (mode) {
this.loadEnv(mode)
}
// load base .env
this.loadEnv()
// 读取用户的配置信息.一般为vue.config.js
const userOptions = this.loadUserOptions()
// 读取项目的配置信息并与用户的配置合并(用户的优先级高)
this.projectOptions = defaultsDeep(userOptions, defaults())
debug('vue:project-config')(this.projectOptions)
// 注册插件。
this.plugins.forEach(({ id, apply }) => {
apply(new PluginAPI(id, this), this.projectOptions)
})
// wepback相关配置收集
if (this.projectOptions.chainWebpack) {
this.webpackChainFns.push(this.projectOptions.chainWebpack)
}
if (this.projectOptions.configureWebpack) {
this.webpackRawConfigFns.push(this.projectOptions.configureWebpack)
}
}
resolvePlugins (inlinePlugins, useBuiltIn) {
const idToPlugin = id => ({
id: id.replace(/^.\//, 'built-in:'),
apply: require(id)
})
let plugins
// 主要是这里。map得到的每个插件都是一个{id, apply的形式}
// 其中require(id)将直接import每个插件的默认导出。
// 每个插件的导出api为
// module.exports = (PluginAPIInstance,projectOptions) => {
// PluginAPIInstance.registerCommand('cmdName（例如npm run serve中的serve）', args => {
// // 根据命令行收到的参数，执行该插件的业务逻辑
// })
// // 业务逻辑需要的其他函数
//}
// 注意着里是先在构造函数中resolve了插件。然后再run->init->方法中将命令，通过这里的的apply方法，
// 将插件对应的命令注册到了service实例。
const builtInPlugins = [
'./commands/serve',
'./commands/build',
'./commands/inspect',
'./commands/help',
// config plugins are order sensitive
'./config/base',
'./config/css',
'./config/dev',
'./config/prod',
'./config/app'
].map(idToPlugin)
// inlinePlugins与非inline得处理。默认生成的项目直接运行时候，除了上述数组的插件['./commands/serve'...]外，还会有
// ['@vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-service']。
// 处理结果是两者的合并，细节省略。
if (inlinePlugins) {
//...
} else {
//...默认走这条路线
plugins = builtInPlugins.concat(projectPlugins)
}
// Local plugins 处理package.json中引入插件的形式，具体代码省略。
return plugins
}
async run (name, args = {}, rawArgv = []) {
// mode是dev还是prod？
const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
// 收集环境变量、插件、用户配置
this.init(mode)
args._ = args._ || []
let command = this.commands[name]
if (!command && name) {
error(`command "${name}" does not exist.`)
process.exit(1)
}
if (!command || args.help) {
command = this.commands.help
} else {
args._.shift() // remove command itself
rawArgv.shift()
}
// 执行命令。例如vue-cli-service serve 则，执行serve命令。
const { fn } = command
return fn(args, rawArgv)
}
// 收集vue.config.js中的用户配置。并以对象形式返回。
loadUserOptions () {
// 此处代码省略，可以简单理解为
// require(vue.config.js)
return resolved
}
}
PluginAPIコンパイルするプラグ-jsがあります
PluginAPIの3、
class PluginAPI {
constructor (id, service) {
this.id = id
this.service = service
}
// 在service的init方法中
// 该函数会被调用，调用处如下。
// // apply plugins.
// 这里的apply就是插件暴露出来的函数。该函数将PluginAPI实例和项目配置信息(例如vue.config.js)作为参数传入
// 通过PluginAPIInstance.registerCommand方法，将命令注册到service实例。
// this.plugins.forEach(({ id, apply }) => {
// apply(new PluginAPI(id, this), this.projectOptions)
// })
registerCommand (name, opts, fn) {
if (typeof opts === 'function') {
fn = opts
opts = null
}
this.service.commands[name] = { fn, opts: opts || {}}
}
}
module.exports = PluginAPI
これらのファイルは、すべてあなたが効果を見ることができるアドレスを入力して、自分のブラウザ、私たちのプロジェクトのVUEの建設を完了するために一緒に動作しています
