【工程化】脚手架执行流程学习

我们通过实现一个简单的脚手架来了解他的执行流程

1、创建项目

mkdir cli-demo && cd cli-demo

通过命令行创建文件夹cli-demo并进入

2、初始化项目

npm init

一路回车即可，这看个时候pack.json如下

{
    "name": "cli-demo",
    "version": "1.0.0",
    "description": "cli-demo test",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}
  

3、添加bin命令

在package.json添加如下代码

"bin": {
  "cli-demo": "bin/index.js"
}

这行命令的作用： 当我们安装这个包以后，在控制台执行cli-demo的时候会 去执行bin文件夹下的index文件

此时完整的package.json如下

{
  "name": "cli-demo",
  "version": "1.0.0",
  "description": "* npm ``` npm install scu-uni -g scu-uni init",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "cli-demo": "bin/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "commander": "^2.15.1"
  }
}

4、 创建bin/index.js文件

创建好index.js文件后，此时项目结构如下

index.js代码如下：

#!/usr/bin/env node --harmony
'use strict'
 // 定义脚手架的文件路径
console.log('你好,测试');

命令解释

#!/usr/bin/env node

• #！：是一个特殊的注释，称为 shebang，它指定了该脚本的执行环境
• /usr/bin/env： 是一个环境变量，查找并执行给定命令的位置。它允许您在不指定绝对路径的情况下执行命令
• #!/usr/bin/env node ： 系统动态的去查找node来执行你的脚本文件

知识补充：bin字段

• bin 字段是 package.json文件中的一个字段，用于指定命令行工具的入口文件。
• 当您使用 npm install 安装好一个包后：npm 会自动在全局路径下创建一个指向该入口文件的软链接，因此您可以在命令行中以任意位置使用该工具；

5、npm link-软链项目

在项目根目录下，执行

npm link

作用：将项目链接到本地环境，相当于在全局安装了这个包 等价于

npm install cli-demo -g

上面第4点的知识补充中，我们已经知道npm 安装一个包后，npm 会自动在全局路径下创建一个指向该入口文件的软链接，这说的入口指的cli-demo对应的bin/index.js文件，bin/index.js文件内容如下

#!/usr/bin/env node --harmony
'use strict'
 // 定义脚手架的文件路径
console.log('你好,测试');

所以这个时候我们能够在全局使用我们的脚手架命令： cli-demo

在控制台可以看到输出： 你好,测试

这样一个简单的脚手架基本上算是完成了，接下来就是发包；发包完成后，其他人就可以通过装包，然后使用脚手架了；

完成上述案列发包后，任何用户都已通过如下命令：

npm i cli-demo -g

cli-demo

得到和我们一样的输出结果

总结

通过这个简单的cli-demo我们大概清楚脚手架的执行原理如下：

1、当我们安装了脚手架xx后，npm 会自动在全局路径下创建一个指向该入口文件的软链接

2、我们可以使用 bin 字段来指定工具的入口文件

3、这样在使用工具命令的时候，其实等价于执行package.json的bin字段对应的文件

在cli-demo项目中：package.json如下

{
  "name": "cli-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "cli-demo": "bin/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "commander": "^2.15.1"
  }
}

所以我们在执行cli-demo的时候等价于执行
bin/index.js