建设一个网站价格,建立小程序需要多少钱,软件开发工程师是干嘛的,广西建设网桂建云网站从使用角度理解什么是脚手架
脚手架本质是一个操作系统的客户端 在终端中去执行一个命令#xff0c;这个命令本身它就是一个客户端我们其实可以把脚手架理解为操作系统的一个客户端通过命令去执行它的时候#xff0c;这个命令往往是这样的一个构造#xff0c;如下 比如这个命令本身它就是一个客户端我们其实可以把脚手架理解为操作系统的一个客户端通过命令去执行它的时候这个命令往往是这样的一个构造如下 比如要创建一个vue的项目的时候, $ vue create vue-test-app 上面这条命令由3个部分组成 主命令: vuecommand: create 这个 command 是子命令实际上它向脚手架(主命令)发送一个请求这个请求让我们的脚手架帮我们完成一个动作完成这个动作就是create创建项目 command的param: vue-test-app 建什么项目呢看这第三个参数在command后面又加了一个空格输入了一个参数 这个命令输入完以后脚手架会给我们一定的反馈, 比如说会让我们做一些选择或者会帮我们执行一些操作等等它表示创建一个vue项目项目名称为 vue-test-app 以上是一个较为简单的脚手架命令但实际场景往往更复杂比如: 当前目录已经有文件了我们需要覆盖当前目录下的文件强制进行安装 vue 项目此时我们就可以输入$ vue create vue-test-app --force --force 叫做 option, 用来辅助脚手架确认在特定场景下用户的选择(可以理解为配置)如果加入了 --force就等于告诉脚手架创建项目的时候可以强制进行覆盖如果没加 --force, 那么脚手架的执行就会中断。因为你没有强制覆盖而我当前又有文件所以我就会中断其实 --force 可以理解为 --force true, 简写为--force 或 -f 还有一种场景, 通过 vue create 创建项目时会自动执行 npm install 帮用户安装依赖 如果我们使用淘宝源来安装就可以输入命令 vue create vue-test-app --force -r https://registry.npm.taobao.org这里的 -r 也是 option, 它与 --force 不同的是它使用 -并且使用简写这里 -r 也可替换成 --registry同时我们可以通过 vue create --help 来查看其他可用命令-r https://registry.npm.taobao.org 后面的 https://registry.npm.taobao.org 成为 option的param
脚手架原理 我们需要理解输入了 $ vue create vue-test-app 之后为什么会发生一系列的事情 我们先要理解整个 vue 脚手架的体系如下图 通过 $ which vue 可看到 /usr/local/bin/vue, 这里的vue其实是一个软连接 参考vue - …/…/…/Users/xxx/.config/yarn/global/node_modules/.bin/vue前面的 vue 其实执行的就是后面路径里的vue命令 程序员在终端中输入 $ vue create vue-test-app终端解析出 vue 命令终端在环境变量中找到 vue 命令终端根据 vue 命令链接到实际文件 vue.js终端利用 node 执行 vue.jsvue.js 解析 commond / optionsvue.js 执行 commond执行完毕退出
从应用角度开发 以 vue-cli 为例开发一个脚手架 比如/Users/johnny/.config/yarn/global/node_modules/vue/cli 其目录结构 LICENSE
README.md
bin
lib
node_modules
package.json需要开发一个 npm 项目该项目中应包含一个 bin/vue.js 文件并将这个项目发布到 npm 将 npm 项目安装到 node 的 lib/node_modules或者如: /…/yarn/global/node_modules 在 node 的 bin 目录下配置 vue 软链接指向 lib/node_modules 在执行vue命令的时候就可以找到 vue.js 进行执行这样一个板顶关系在package.json中 {bin: {vue: bin/vue.js}
}这个就是 vue 和 vue.js 之间的绑定关系 这就是为什么全局安装 vue/cli 后会添加的命令为 vue $ npm i -g vue/cli 全局安装 vue/cli 时发生了什么 在安装时会把当前npm包下载到 lib/node_modules 或者如: /…/yarn/global/node_modules 下 之后解析 package.json 中的 bin 属性创建一个软连接 /usr/local/bin/vue 指向 /../yarn/global/node_modules/vue/cli/bin/vue.js 中 执行vue命令时发生了什么为何 vue 指向了 js 文件却可以通过 vue 命令执行它 操作系统会根据 $ which vue 中的 vue 路径找到 vue执行文件如果 vue 命令不存在会报出 command not found 的提示这个vue执行路径其实是一个软链接通过这个软连接找到真实的 vue地址对应的就是 上述 /…/bin/vue.js这个 vue.js 是一个 js文件即使有执行权限也不可直接执行需要一个 node 的解释器就是类似 node /…/bin/vue.js但是很明显在执行vue命令时并没有冠以 node 的前缀直接进入 /…/yarn/global/node_modules/vue/cli/bin/vue.js可看到最顶部有一个声明 #!/usr/bin/env node 这个声明可以直接让 xx.js 文件直接在操作系统执行意思是告诉操作系统在直接调用这个文件的时候到环境变量中去找 node 命令类似的如果是个python文件将node修改成 python/usr/bin/env 会列出所有环境变量在这个环境变量列表中找到 node 命令通过 node 命令来执行这个 js 文件因此任何js文件只要在文件顶部加上这个声明即可 直接执行 (这里限制在 unix 系统)此时 ./xx.js 等价于 node xx.js注意#!/usr/bin/env node 这样写的好处是 无需关注每一个电脑环境下的node路径这个也可替换成具体的node路径也是一样的但是会非常的麻烦而且换个环境可能就不能用了所以还是采用这种方式来处理 现在我们想要用 mycommand (这个是我们自定义脚手架随意举例) 指向 xx.js就可以通过创建软链接的方式来处理 进入到 /usr/local/bin 目录创建软链接 $ ln -s /../xx.js mycommand 注意这里的 /…/xx.js 是当前脚本的路径替换成自己的即可 可看到当前目录下有一个 imooc 的文件此时在系统内任意位置只需要执行 mycommand 即可运行 xx.js 这个就是我们自定义的脚手架 mycommand 的基本设定
最后描述一下脚手架命令执行的一个整个过程 脚手架的本质是操作系统上的一个客户端
可以发现脚手架执行起来的过程和前端开发的应用是非常不一样的其实它和web应用从本质上来讲没有关系它们的联系仅仅是脚手架和开发的web应用都是通过 js 这个语言来进行编写的但其实脚手架它其实是操作系统当中的一种机制执行脚手架的时候它其实是被作为一个操作系统上的可执行文件来进行执行的所以可以说我们开发的脚手架就是操作系统上的一个客户端我们的脚手架它本质执行起来时候是依靠 node 这个命令node 是一个操作系统客户端而我们的 xx.js 仅仅是node的一个参数换句话说仅仅是把一个参数注到 node 当中类似的可以这样 node -e console.log(1) 这样也可以执行也就是说脚手架是操作系统的客户端其本质并不是说 xx.js 是一个客户端而是node本身它是一个客户端在windows中node 是 node.exe在mac中node 是 node* (*代表可执行文件)当去执行 node xx.js 的时候其实是把 xx.js 中的代码变成一个字符串传入到node中然后 node 对这些字符串进行解析把它当成一个可执行程序进行执行这些逻辑全部是预设好的预设好的逻辑就存放在这个node的可执行文件当中所以脚手架是客户端其本质是因为node本身就是客户端
脚手架和在PC上面安装的其他应用或者软件的区别
本质来说没有区别在操作系统上安装了软件windows上都是 exe 后缀在 macos 上面都是可执行文件所以本质没有区别它们的区别仅仅是安装的一些软件会提供一个GUI像当前终端一样它会提供一个GUI而我们的 node 并没有提供 GUI我们的node是直接通过命令行的方式传入参数来进行执行仅仅是这样的一个差别
如果想在 nodejs 当中去展示GUI有可能吗 完全可能我们只需要去调用操作系统的GUI绘制API就可以绘制出窗口来所以脚手架本质它其实就是个客户端。但注意, 不是我们编写的代码是客户端而是node本身是客户端
为 node 脚手架创建别名
方式 1就是通过编写一个软链接其本身会链接到我们自己编写的一个代码文件上方式 2现在继续想给 mycommand 添加一个别名或者对其进行修改 进入到 /usr/local/bin 目录执行 ln -s ./mycommand mycommand1 这样就可以通过 mycommand1 来执行 可见软链接是可以嵌套的基于此可以给当前脚手架起别名
