相信每一个前端同学都有使用过脚手架, 不管你的技术栈是vue、react还是angular或者是svelte, 前端脚手架都与我们的日常开发密不可分, 学习脚手架, 不仅有利于我们理解node_module的安装和执行过程, 还能定制我们的项目基础建设流程, 大大提高研发效率; ~~(另外, 下次面试的时候还可以吊打面试官, 开个玩笑)~~, 好了那我们正式开始吧!

什么是脚手架？

从功能上看: 顾名思义, 脚手架就是我们在创建项目的时候的一个基础工具, 可以帮助我们实现创建项目时候的很多重复逻辑, 比如axios集成, 安装公司统一的组件库依赖, 项目的埋点方案等... 从本质来看: 前端的脚手架就是一个js文件(是的, 你没听错, 就是一个js文件, 下面我会做详细的解说, 并来验证这一说法)

脚手架执行过程分析

以我们熟悉的vue create为例, 我们在执行vue [option] [parament]的时候这个过程发生了什么呢？了解过linux的同学肯定知道, 我们可以通过which找到命令具体指向的是哪个文件, 我们执行which vue(记得先安装vue-cli哦), 会看到vue其实指向的是/usr/local/bin/vue这个文件

➜  ~ which vue
/usr/local/bin/vue

lrwxr-xr-x接下来我们cd到/usr/local/bin这个目录下执行ls -al命令, 可以看到lrwxr-xr-x, 第一个l表示这个是一个软连接(就是windows的快捷方式), 这个软链指向的就是../lib/node_modules/@vue/cli/bin/vue.js这个文件

➜  bin ls -al | grep vue
lrwxr-xr-x   1 felixhi  wheel         39  3 15 10:36 vue -> ../lib/node_modules/@vue/cli/bin/vue.js

接下来我们就打开../lib/node_modules/@vue/cli/bin/vue.js这个文件来看看里面是什么内容, 这个文件内容比较长, 我截取了前面几行给同学们看一下

➜  bin pwd
/usr/local/lib/node_modules/@vue/cli/bin
➜  bin cat vue.js
#!/usr/bin/env node

// Check node version before requiring/doing anything else
// The user may be on a very old node version

const { chalk, semver } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node
const leven = require('leven')

function checkNodeVersion (wanted, id) {
  if (!semver.satisfies(process.version, wanted, { includePrerelease: true })) {
    console.log(chalk.red(
      'You are using Node ' + process.version + ', but this version of ' + id +
      ' requires Node ' + wanted + '.\nPlease upgrade your Node version.'
    ))
    process.exit(1)
  }
}

重点关注#!/usr/bin/env node, 写过bash脚本的同学看到这一行就知道啦, 噢...原来这就是一个普通的脚本, 只不过当我们执行这个文件的时候, 会调用node来执行好啦这就是脚手架的基本的执行过程啦

验证

为了让大家更好的理解这一过程, 接下来我们写个小demo来验证这一过程

任意目录下新建一个js文件vim test.js, 并且输入以下内容

#!/usr/bin/env node
console.log("This is a test file from node")

这里要跟大家科普一个小知识, 后缀名的目的是为了告诉系统, 我们应该用哪个成应用程序来打开它, 但是在linux系统里面, 是没有后缀名的这个概念的, 不管你是.js, .txt, .anything, 其实都是文件名的一部分, 加上后缀名只是为了让我们程序员更加快捷的知道应该用什么程序来打开它

所以这里我再另外新建一个test.sh的文件来作为对比, test.sh中我们写入以下内容

#!/bin/bash
echo "This is a test file from shell"

接下来, 我们分别为两个文件加上软链, 先cd到/usr/local/bin目录下(一定要到这个目录下执行, 不要问我为什么, 因为我踩坑调试了一个小时):

➜  ~ ln -s /Users/felixhi/test.js testjs
➜  ~ ln -s /Users/felixhi/test.sh testsh

添加好了以后就可以在任何目录下执行我们添加的这两个命令啦！

➜  ~ testsh
This is a test file from shell
➜  ~ testjs
This is a test file from node
➜  ~

好啦~-~, 今天的分享就到这里啦, 明天我们来写一个最最基础的脚手架, 并且publish到npm上, 来了解脚手架的开发和发布流程

01.认识前端脚手架

什么是脚手架？

脚手架执行过程分析

验证