国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[Vue CLI 3] vue inspect 的源碼設(shè)計(jì)實(shí)現(xiàn)

leiyi / 1005人閱讀

摘要：首先，請(qǐng)記住它在新版本的腳手架項(xiàng)目里面非常重要它有什么用呢能快速地在控制臺(tái)看到對(duì)應(yīng)生成的配置對(duì)象。最后多是通過的函數(shù)來生成，最終在控制臺(tái)打印

首先，請(qǐng)記住：

它在新版本的腳手架項(xiàng)目里面非常重要

它有什么用呢？

inspect internal webpack config

能快速地在控制臺(tái)看到對(duì)應(yīng)生成的 webpack 配置對(duì)象。

首先它是 vue 的一個(gè)擴(kuò)展命令，在文件 @vue/cli/bin/vue.js 中定義了 command

還是依賴了工具包 commander

const program = require("commander")

代碼配置如下：

program
  .command("inspect [paths...]")
  .description("inspect the webpack config in a project with vue-cli-service")
  .option("--mode ")
  .option("--rule ", "inspect a specific module rule")
  .option("--plugin ", "inspect a specific plugin")
  .option("--rules", "list all module rule names")
  .option("--plugins", "list all plugin names")
  .option("-v --verbose", "Show full function definitions in output")
  .action((paths, cmd) => {
    require("../lib/inspect")(paths, cleanArgs(cmd))
  })

這里的 option 比較多：

mode

rule

plugin

rules

plugins

verbose

在前面的文章中，我們比較常用的有 rule 相關(guān)的

再接著看一下 lib/inspect.js 文件：接受 2 個(gè)參數(shù)：

paths

args

module.exports = function inspect (paths, args) {
}

核心還是找到 @vue/cli-service，先獲取當(dāng)前執(zhí)行命令的目錄：

const cwd = process.cwd()
let servicePath = resolve.sync("@vue/cli-service", { basedir: cwd })

最終執(zhí)行了 node ***/node_modules/@vue/cli-service/bin/vue-cli-service.js inspect 再帶上參數(shù)：

調(diào)用了工具包 execa：

const execa = require("execa")
execa("node", [
  binPath,
  "inspect",
  ...(args.mode ? ["--mode", args.mode] : []),
  ...(args.rule ? ["--rule", args.rule] : []),
  ...(args.plugin ? ["--plugin", args.plugin] : []),
  ...(args.rules ? ["--rules"] : []),
  ...(args.plugins ? ["--plugins"] : []),
  ...(args.verbose ? ["--verbose"] : []),
  ...paths
], { cwd, stdio: "inherit" })

那我們接著往下看，后面就是去 cli-service 目錄了：@vue/cli-service/lib/commands/inspect.js

通過 api.registerCommand 來注冊(cè)一個(gè):

module.exports = (api, options) => {
  api.registerCommand("inspect", {

  }, args => {

  })
}

在回調(diào)函數(shù)里面會(huì)處理之前的 option 傳遞的參數(shù)：

1、處理 rule

if (args.rule) {
  res = config.module.rules.find(r => r.__ruleNames[0] === args.rule)
}

2、處理 plugin

if (args.plugin) {
  res = config.plugins.find(p => p.__pluginName === args.plugin)
}

3、處理 rules

if (args.rules) {
  res = config.module.rules.map(r => r.__ruleNames[0])
}

4、處理 plugins

if (args.plugins) {
  res = config.plugins.map(p => p.__pluginName || p.constructor.name)
}

其他分支情況比較少用，暫時(shí)不做展開。

最后多是通過 webpack-chain 的 toString 函數(shù)來生成，最終在控制臺(tái)打印：

You can inspect the generated webpack config using config.toString(). This will generate a stringified version of the config with comment hints for named rules, uses and plugins.
const { toString } = require("webpack-chain")
const output = toString(res, { verbose })

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97351.html

相關(guān)文章

  • [全網(wǎng)最全的 Vue CLI 3 原創(chuàng)合集] 你要的這里都有

    摘要：慢慢地，關(guān)于的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫了多篇了會(huì)一直放出來，目前篇，因此做一個(gè)合集，獻(xiàn)給那些對(duì)新版本腳手架使用和背后設(shè)計(jì)感興趣的同學(xué)，都是一步一步去看源碼，也給官方提了幾次，合進(jìn)去了幾個(gè)原創(chuàng)不易，歡迎大家互相轉(zhuǎn)發(fā)，期望大家一起快速過度到版本目錄 慢慢地，關(guān)于 Vue CLI 3 的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫了 20 多篇了（會(huì)一直放出來，目前 23 篇）， 因此做一個(gè)合集，獻(xiàn)給那些對(duì)新版本腳手架使用...

    phpmatt 評(píng)論0 收藏0

  • vue-cli 3.0 源碼分析

    摘要：寫在前面其實(shí)最開始不是特意來研究的源碼，只是想了解下的命令，如果想要了解命令的話，那么繞不開寫的。通過分析發(fā)現(xiàn)與相比，變化太大了，通過引入插件系統(tǒng)，可以讓開發(fā)者利用其暴露的對(duì)項(xiàng)目進(jìn)行擴(kuò)展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 寫在前面 其實(shí)最開始不是特意來研究 vue-cli 的源碼，只是想了解下 n...

    yiliang 評(píng)論0 收藏0

  • 如何配置 vue-cli 3.0 的 vue.config.js

    摘要：那么，我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化，幫開發(fā)者已經(jīng)解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉(cāng)庫(kù)由原有獨(dú)立的 github 倉(cāng)庫(kù)遷移到了 vue 項(xiàng)目下 ...

    xuweijian 評(píng)論0 收藏0

  • 如何配置 vue-cli 3.0 的 vue.config.js

    摘要：那么，我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化，幫開發(fā)者已經(jīng)解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉(cāng)庫(kù)由原有獨(dú)立的 github 倉(cāng)庫(kù)遷移到了 vue 項(xiàng)目下 ...

    UsherChen 評(píng)論0 收藏0

  • 如何配置 vue-cli 3.0 的 vue.config.js

    摘要：那么，我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化，幫開發(fā)者已經(jīng)解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉(cāng)庫(kù)由原有獨(dú)立的 github 倉(cāng)庫(kù)遷移到了 vue 項(xiàng)目下 ...

    ZoomQuiet 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

leiyi

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<