蜜桃一二三在线视频,激情色婷婷综合天堂,AV女优AV天堂

vue CLI 用起來(lái)的確很舒服，方便省事，但他經(jīng)過(guò)層層封裝很難明白，執(zhí)行完那個(gè)npm run serve/build 后他都干了些什么，甚至不知道整個(gè)項(xiàng)目是怎么跑起來(lái)的，今天自己抽時(shí)間就去瞅瞅,為加深記錄特此記錄記錄

【聲明】純屬個(gè)人學(xué)習(xí)推敲，有不對(duì)的地方歡迎指正，我們一起討論共同學(xué)習(xí)一起進(jìn)步

一、探尋npm run 背后的真實(shí)操作

1、看看 npm run serve

首選從npm run serve 開(kāi)始，整個(gè)應(yīng)該都很熟悉了，執(zhí)行這命令后就是執(zhí)行，package.json 的script 中key為serve后面的值


  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

其實(shí)真實(shí)的執(zhí)行命令是這一個(gè) npm run vue-cli-service serve 命令，那這個(gè)是個(gè)啥意思我們做個(gè)測(cè)試,添加個(gè)test 進(jìn)行測(cè)試


      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "test":"echo hello vue "
      },

再來(lái)執(zhí)行下命令 run , 看如下打印


    D:\YLKJPro\fgzs>npm run test
    
    > sdz@0.1.0 test D:\YLKJPro\fgzs
    > echo hello vue
    
    hello vue

其實(shí)就是執(zhí)行了test 后面的echo , 那么 npm run vue-cli-service serve 后面的serve 是干啥的呢？再來(lái)看看


    D:\YLKJPro\fgzs>npm run test serve
    
    > sdz@0.1.0 test D:\YLKJPro\fgzs
    > echo hello vue  "serve"
    
    hello vue  "serve"

其實(shí)就是將后面的當(dāng)成了參數(shù)

2、仿造一個(gè)serve

如果不信，我們?cè)賮?lái)做一個(gè)測(cè)試看看(仿造一個(gè) serve)

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test":"my-npm-test serve"
  },

執(zhí)行npm run test 輸出如下


D:\YLKJPro\fgzs>npm run test

> sdz@0.1.0 test D:\YLKJPro\fgzs
> my-npm-test serve

serve

咦，奇怪了， serve 怎么打印出來(lái)的呢，我并沒(méi)有使用echo ？其實(shí)我是模仿了原來(lái)的腳本，

2-1. 創(chuàng)建測(cè)試文件夾

先在node_modules下創(chuàng)建一個(gè)mytest/bin目錄，同時(shí)在該bin目錄下創(chuàng)建一個(gè)測(cè)試的js，如下

image

這個(gè)測(cè)試的js 也很簡(jiǎn)單就是把那個(gè)接收的參數(shù)打印出來(lái),如下：


#!/usr/bin/env node

const rawArgv = process.argv.slice(2)

console.log(rawArgv[0])

2-2. 在 node_modules/.bin下創(chuàng)建測(cè)試腳本

image

添加了一個(gè) linux 和 windows 的shell 腳本（my-npm-test和my-npm-test.cmd）
其實(shí)里面就一些目標(biāo)js的路徑

2-3. 添加my-npm-test

my-npm-test

#!/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. 添加my-npm-test.cmd

my-npm-test.cmd 用于windows 端


@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" %*
)

到這里總算對(duì)npm run 有些了解了；

其實(shí) 執(zhí)行 npm help run 官方也有想對(duì)應(yīng)的解釋如

image

2-5. 執(zhí)行原理

使用npm run script執(zhí)行腳本的時(shí)候都會(huì)創(chuàng)建一個(gè)shell，然后在shell中執(zhí)行指定的腳本。

這個(gè)shell會(huì)將當(dāng)前項(xiàng)目的可執(zhí)行依賴目錄（即node_modules/.bin）添加到環(huán)境變量path中，當(dāng)執(zhí)行之后之后再恢復(fù)原樣。就是說(shuō)腳本命令中的依賴名會(huì)直接找到node_modules/.bin下面的對(duì)應(yīng)腳本，而不需要加上路徑。

2-6. 舉一反三探尋npm run serve

好吧到這了總算知道npm run 并不是那么神秘了，咦好像搞了半天還沒(méi)說(shuō)到，npm run serve 相關(guān)的東西，其實(shí)這已經(jīng)講完了，仔細(xì)一想，npm run serve === npm run vue-cli-service serve ,那么node_modules/.bin下面一定有兩個(gè)vue-cli-service的文件，找找。。。

image

果不其然，再打開(kāi)看看，他最終執(zhí)行的js 是什么。打開(kāi)文件

image

根據(jù)路徑可以找到node_modules/@vue下對(duì)應(yīng)的 js，
如下：

image

OK，總算找到了真正的執(zhí)行者，那這個(gè)文件又干了些什么呢，項(xiàng)目就這么啟動(dòng)了？

二、項(xiàng)目編譯詳解

我們打開(kāi)這個(gè)vue-cli-service.js （代碼就不行行詳細(xì)講解了，直接借助大佬博客https://segmentfault.com/a/1190000017876208）

1、關(guān)于vue-cli-service.js

    
    const semver = require('semver')
    const { error } = require('@vue/cli-shared-utils')
    const requiredVersion = require('../package.json').engines.node
    
    // 檢測(cè)node版本是否符合vue-cli運(yùn)行的需求。不符合則打印錯(cuò)誤并退出。
    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')
    // 新建一個(gè)service的實(shí)例。并將項(xiàng)目路徑傳入。一般我們?cè)陧?xiàng)目根路徑下運(yùn)行該cli命令。所以process.cwd()的結(jié)果一般是項(xiàng)目根路徑
    const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
    
    // 參數(shù)處理。
    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]
    
    // 將我們執(zhí)行npm run serve 的serve參數(shù)傳入service這個(gè)實(shí)例并啟動(dòng)后續(xù)工作。(如果我們運(yùn)行的是npm run build。那么接收的參數(shù)即為build)。
    service.run(command, args, rawArgv).catch(err => {
      error(err)
      process.exit(1)
    })

上面js 最后調(diào)用了../lib/Service 中的run來(lái)進(jìn)行項(xiàng)目的構(gòu)建，那再去看看 Service.js 又做了些什么

2、關(guān)于Service.js


 // ...省略import

module.exports = class Service {
  constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
    process.VUE_CLI_SERVICE = this
    this.initialized = false
    // 一般是項(xiàng)目根目錄路徑。
    this.context = context
    this.inlineOptions = inlineOptions
    // webpack相關(guān)收集。不是本文重點(diǎn)。所以未列出該方法實(shí)現(xiàn)
    this.webpackChainFns = []
    this.webpackRawConfigFns = []
    this.devServerConfigFns = []
    //存儲(chǔ)的命令。
    this.commands = {}
    // Folder containing the target package.json for plugins
    this.pkgContext = context
    // 鍵值對(duì)存儲(chǔ)的pakcage.json對(duì)象，不是本文重點(diǎn)。所以未列出該方法實(shí)現(xiàn)
    this.pkg = this.resolvePkg(pkg)
    // **這個(gè)方法下方需要重點(diǎn)閱讀。**
    this.plugins = this.resolvePlugins(plugins, useBuiltIn)
    
    // 結(jié)果為{build: production, serve: development, ... }。大意是收集插件中的默認(rèn)配置信息
    // 標(biāo)注build命令主要用于生產(chǎn)環(huán)境。
    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()
    // 讀取項(xiàng)目的配置信息并與用戶的配置合并(用戶的優(yōu)先級(jí)高)
    this.projectOptions = defaultsDeep(userOptions, defaults())

    debug('vue:project-config')(this.projectOptions)

    // 注冊(cè)插件。
    this.plugins.forEach(({ id, apply }) => {
      apply(new PluginAPI(id, this), this.projectOptions)
    })

    // wepback相關(guān)配置收集
    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得到的每個(gè)插件都是一個(gè){id, apply的形式}
    // 其中require(id)將直接import每個(gè)插件的默認(rèn)導(dǎo)出。
    // 每個(gè)插件的導(dǎo)出api為
    // module.exports = (PluginAPIInstance,projectOptions) => {
    //    PluginAPIInstance.registerCommand('cmdName（例如npm run serve中的serve）', args => {
    //        // 根據(jù)命令行收到的參數(shù)，執(zhí)行該插件的業(yè)務(wù)邏輯
    //    })
    //    //  業(yè)務(wù)邏輯需要的其他函數(shù)
    //}
    // 注意著里是先在構(gòu)造函數(shù)中resolve了插件。然后再run->init->方法中將命令，通過(guò)這里的的apply方法，
    // 將插件對(duì)應(yīng)的命令注冊(cè)到了service實(shí)例。
    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得處理。默認(rèn)生成的項(xiàng)目直接運(yùn)行時(shí)候，除了上述數(shù)組的插件['./commands/serve'...]外，還會(huì)有
    // ['@vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-service']。
    // 處理結(jié)果是兩者的合并，細(xì)節(jié)省略。
    if (inlinePlugins) {
        //...
    } else {
        //...默認(rèn)走這條路線
      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])

    // 收集環(huán)境變量、插件、用戶配置
    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()
    }
    // 執(zhí)行命令。例如vue-cli-service serve 則，執(zhí)行serve命令。
    const { fn } = command
    return fn(args, rawArgv)
  }

  // 收集vue.config.js中的用戶配置。并以對(duì)象形式返回。
  loadUserOptions () {
    // 此處代碼省略，可以簡(jiǎn)單理解為
    // require(vue.config.js)
    return resolved
  }
}

2-1. command 中的fn

看到上面說(shuō)的

    // 執(zhí)行命令。例如vue-cli-service serve 則，執(zhí)行serve命令。
    const { fn } = command
    return fn(args, rawArgv)

其實(shí)還是不明吧，command中他究竟執(zhí)行了個(gè)什么操作，那不妨來(lái)個(gè)console

image

我們?cè)龠\(yùn)行下 run build 來(lái)看究竟，一執(zhí)行屏幕就打印了一異步函數(shù)

image

咦這是哪里的，不要忘記了，上面說(shuō)的在運(yùn)行npm run build 時(shí)我們給他傳入了一個(gè)build的參數(shù)

而在代碼的解析中我們知道，在constructor構(gòu)造時(shí)就將其所需外部plugin編譯到了command中

所以根據(jù)builtInPlugins這里的操作，我們就能找到這個(gè)異步函數(shù)是在commands/build/index.js中, 到該文件一看就都明白了

接下來(lái)還有一個(gè)是 PluginAPI 進(jìn)行插件編譯的js

3、關(guān)于PluginAPI

class PluginAPI {

  constructor (id, service) {
    this.id = id
    this.service = service
  }
  // 在service的init方法中
  // 該函數(shù)會(huì)被調(diào)用，調(diào)用處如下。
  // // apply plugins.
  // 這里的apply就是插件暴露出來(lái)的函數(shù)。該函數(shù)將PluginAPI實(shí)例和項(xiàng)目配置信息(例如vue.config.js)作為參數(shù)傳入
  // 通過(guò)PluginAPIInstance.registerCommand方法，將命令注冊(cè)到service實(shí)例。
  //  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

這些文件所有的操作加起來(lái)就完成了我們vue項(xiàng)目的構(gòu)建，直接瀏覽器輸入地址就可以看見(jiàn)效果了(一步步操作看完，是否感覺(jué)還是蠻復(fù)雜的呢- -哪有什么歲月靜好，不過(guò)是有人替你負(fù)重前行罷了)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

npm run serve/build 背后的真實(shí)操作

npm run serve/build 背后的真實(shí)操作

一、探尋npm run 背后的真實(shí)操作

1、看看 npm run serve

2、仿造一個(gè)serve

2-1. 創(chuàng)建測(cè)試文件夾

2-2. 在 node_modules/.bin下創(chuàng)建測(cè)試腳本

2-3. 添加my-npm-test

2-4. 添加my-npm-test.cmd

2-5. 執(zhí)行原理

2-6. 舉一反三探尋npm run serve

二、項(xiàng)目編譯詳解

1、關(guān)于vue-cli-service.js

2、關(guān)于Service.js

2-1. command 中的fn

3、關(guān)于PluginAPI

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

npm run serve/build 背后的真實(shí)操作

一、探尋npm run 背后的真實(shí)操作

1、看看 npm run serve

2、仿造一個(gè)serve

2-1. 創(chuàng)建測(cè)試文件夾

2-2. 在 node_modules/.bin下創(chuàng)建測(cè)試腳本

2-3. 添加my-npm-test

2-4. 添加my-npm-test.cmd

2-5. 執(zhí)行原理

2-6. 舉一反三探尋npm run serve

二、項(xiàng)目編譯詳解

1、關(guān)于vue-cli-service.js

2、關(guān)于Service.js

2-1. command 中的fn

3、關(guān)于PluginAPI

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、看看 npm run serve

2、仿造一個(gè)serve

二、項(xiàng)目編譯詳解

1、關(guān)于vue-cli-service.js

2、關(guān)于Service.js

3、關(guān)于PluginAPI