npm run serve/build 背後的真實操作

vue CLI 用起來的確很舒服，方便省事，但他經過層層封裝很難明白，執行完那個npm run serve/build 後他都幹了些什麼，甚至不知道整個項目是怎麼跑起來的，今天自己抽時間就去瞅瞅,爲加深記錄特此記錄記錄

文章目錄

一、探尋npm run 背後的真實操作

二、項目編譯詳解

一、探尋npm run 背後的真實操作

1、看看 npm run serve

首選從npm run serve 開始，整個應該都很熟悉了，執行這命令後就是執行，package.json 的script 中key爲serve後面的值


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

其實真實的執行命令是這一個 npm run vue-cli-service serve 命令，那這個是個啥意思我們做個測試,添加個test 進行測試


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

再來執行下命令 run , 看如下打印


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

其實就是執行了test 後面的echo , 那麼 npm run vue-cli-service serve 後面的serve 是幹啥的呢？再來看看


	D:\YLKJPro\fgzs>npm run test serve
	
	> [email protected] test D:\YLKJPro\fgzs
	> echo hello vue  "serve"
	
	hello vue  "serve"

其實就是將後面的當成了參數

2、仿造一個serve

如果不信，我們再來做一個測試看看(仿造一個 serve)

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

執行npm run test 輸出如下


D:\YLKJPro\fgzs>npm run test

> [email protected] test D:\YLKJPro\fgzs
> my-npm-test serve

serve

咦，奇怪了， serve 怎麼打印出來的呢，我並沒有使用echo ？其實我是模仿了原來的腳本，

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 的shell 腳本（my-npm-test和my-npm-test.cmd）
其實裏面就一些目標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" %*
)

到這裏總算對npm run 有些瞭解了；

其實執行 npm help run 官方也有想對應的解釋如

2-5. 執行原理

使用npm run script執行腳本的時候都會創建一個shell，然後在shell中執行指定的腳本。

這個shell會將當前項目的可執行依賴目錄（即node_modules/.bin）添加到環境變量path中，當執行之後之後再恢復原樣。就是說腳本命令中的依賴名會直接找到node_modules/.bin下面的對應腳本，而不需要加上路徑。

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

好吧到這了總算知道npm run 並不是那麼神祕了，咦好像搞了半天還沒說到，npm run serve 相關的東西，其實這已經講完了，仔細一想，npm run serve === npm run vue-cli-service serve ,那麼node_modules.bin下面一定有兩個vue-cli-service的文件，找找。。。

果不其然，再打開看看，他最終執行的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 中的run來進行項目的構建，那再去看看 Service.js 又做了些什麼

2、關於Service.js


 // ...省略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

3、關於PluginAPI

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項目的構建，直接瀏覽器輸入地址就可以看見效果了(一步步操作看完，是否感覺還是蠻複雜的呢- -哪有什麼歲月靜好，不過是有人替你負重前行罷了)

npm run serve/build 背後的真實操作

文章目錄

一、探尋npm run 背後的真實操作

1、看看 npm run serve

2、仿造一個serve

2-1. 創建測試文件夾

2-2. 在 node_modules/.bin下創建測試腳本

2-3. 添加my-npm-test

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

2-5. 執行原理

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

二、項目編譯詳解

1、關於vue-cli-service.js

2、關於Service.js

3、關於PluginAPI

openlayers 中設置地圖最佳可視範圍和限制縮放

flex彈性佈局模式下文字超出顯示省略號

css預編譯sass和stylus簡單使用 (帶node-sass安裝失敗解決方案 )

踩了一個基礎知識的坑

vue-router幾大坑

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結