Giter Club home page Giter Club logo

vue-cli-analysis's Introduction

vue-cli 源码分析

@vue/cli @vue/cli-service node-version platform Github action License

写在前面

其实最开始不是特意来研究 vue-cli 的源码,只是想了解下 node 的命令,如果想要了解 node 命令的话,那么绕不开 tj 写的 commander.js。在学习 commander.js 过程中发现 vue-cli 的交互方式挺炫酷的,然后就去看了下源码,所以就有了这个仓库。

慎重提醒:我对 vue-cli 的源码以及其中的一些知识点并不熟悉,如果我对其中的知识点非常了解的话我就不会来分析了,分析源码只是想更加了解 vue-cli 整个工具的实现过程以及 vue-cli3 的一些新特性。如果文中有描述有误,还请各位大大 issues or PR

相关说明

vue-cli 仓库 dev 分支下面 package 目录包含了 clicli-serviceCLI 插件UI 插件cli 工具函数代码等等。本项目中的 package 文件夹里面对其中的代码有一定的注释,主要集中在 clicli-service 上,有兴趣的同学可以 fork 后查看。

目录

@vue/cli

@vue/cli-service

请作者喝杯咖啡☕️

如果觉得文章对你有所帮助,不如请作者喝杯咖啡 ☕️

总结

vue-cli-analysis 整个项目可大致分为两个部分,一部分是 vue 命令分析,包含 create,add,invoke, ui 等等,另一部分就是 vue-cli-service 的分析。通过分析发现与 2.X 相比,3.0 变化太大了,通过引入插件系统,可以让开发者利用其暴露的 API 对项目进行扩展。在分析之前对插件机制不是很了解,不知道如何实现的,分析之后逐渐了解了其实现机制,而且对于 vue 项目的配置也更加熟悉了。除此之外,在分析过程过程中还了解了很多有意思的 npm 包,比如 execa, debug, lowdb,lodash,inquirer 等等,最后,如果你想学习 node 命令或者想写一些比较有意思的命令行工具的话,阅读 vue-cli 源码是一个不错的选择。

vue-cli-analysis's People

Contributors

chenqiongqiong avatar dependabot[bot] avatar kuangpf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

vue-cli-analysis's Issues

[Question] 针对Vue cli部分Api执行时机的疑问

首先感谢你的分析分享

Background

看到vue create章节中Generator/GeneratorAPI中提到如下内容:

- render:利用 ejs 渲染模板文件
- onCreateComplete:内存中保存的文件字符串全部被写入文件后的回调函数
- exitLog:当 generator 退出的时候输出的信息

Question

onCreateComplete的描述Push a callback to be called when the files have been written to disk.在源码中也有体现

  • 想咨询一下它真实的执行时机是在每个插件执行结束时回调,还是说有多个插件(preset形式)时其实是在所有插件执行后再执行onCreateComplete
  • 目前的Vue CLI有单个插件结束回调或者单插件生命周期钩子这种东西吗

个人的关注点

插件本身或许应该具备一些生命周期回调,所以我将onCreateComplete默认为了每个插件的结束回调;基于这个判断我认为每个插件结束后会执行一下onCreateComplete,然后再执行其它插件

但是看了源代码之后发现,似乎onCreateComplete更像是整体插件的结束回调而不是单个插件的结束回调:源码体现

想咨询一下你对【Question】部分两个问题的判断是什么,如您有空可以回复一下

vue-cli如何去debug

我看了写cli没有相应的命令

但代码中有相关的debug

请问下这块是如何debug的?

还有它测试用例是如何跑的?

[Question] 针对cli service中chainWebpack执行的疑问

冒昧再请教一下

Background

在我们写service插件的时候会使用Api.chainWebpack去链式的修改我们的webpack配置

比如you尤大在vue-cli/packages/@vue/cli-plugin-typescript/index.js中写的一样
image

我们可以看到这个插件中其实就调了一个Api.chainWebpack,看起来最终插件也成功的链式修改了webpack的配置


Question

从源码来看,这个现象很不科学

PluginApi中Api.chainWebpack只是把要执行的回调push到了一个数组中,并没有去执行:代码
image

最终执行时机是在Service.js/resolveChainableWebpackConfig这一层:
image

但是resolveChainableWebpackConfig在Service.js其实只会在resolveWebpackConfig中执行

而整个cli-service启动过程中resolveWebpackConfig只会在插件实例中通过Api.resolveWebpackConfig去调用

也就是说根据源代码来看写插件的时候仅仅只有Api.chainWebpack是不会生效的

但是可以看到我在上面【背景】中贴出来的图,尤大他们在vue-cli/packages/@vue/cli-plugin-typescript/index.js写的插件确实是只写chainWebpack并没有调用一次resolveWebpackConfig

问题概括

  • 很困惑为什么根据源码来看单chainWebpack无法实现对webpack的修改,但实际运行时却能够生效,是我遗漏了什么点吗?
  • 想请教一下你对这一块的看法


【讨论】使用 Vue CLI 去开发 React 的可行性

Background

详见此 Vue CLI issue #6153


Question

目前通过 create-react-app 在最简单的项目中把 babel、webpack 配置简单修改了一下,测试是可以运行起来,但是不确定会不会有什么坑,想和你讨论一下


Reproduced Repo

repo


[Question] 针对Vue cli加载插件模块的一点疑惑

首先感谢你的分享给我阅读源码时提供的帮助

Background

vue cli加载插件模块使用的是自建的loadModule,而不是直接使用require。
这个点在源代码中频繁出现,但是大家似乎都没分析过这个点,个人很好奇为什么vue cli一定要自己实现一遍
在cli-service中加载模块的代码示例
image

loadModule具体实现的源码路径
image

sodatea 提交 Pr的issue


Question

我个人初期看到的时候觉得没必要自己去实现require,包括去看了NodeJs Module模块createRequire、createRequireFromPath的说明,也并没有看到需要自己去实现的一个必要性,但是其实这个函数贯穿了插件模块使用的全流程,让人比较困惑

想咨询一下您对【loadModule】部分的看法,以及是否有必要自建require


建议

你可以在README中贴一下alipay或者wechat pay的地址,或许我可以请你喝杯咖啡



Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.