前端脚手架实现原理及开发调试流程

前端脚手架实现原理，npm 库的开发发布，及本地调试过程......

一脚手架简介

脚手架本质上是操作系统上的一个客户端（node.exe），通过命令的方式执行。

以 vue-cli 脚手架为例介绍，如：

javascript 复制代码

vue create myVue

该命令表示创建一个名为 myVue 的 vue 工程。这条命令包含三个部分：

主命令：vue
命令（command）：create
命令参数（command param）：myVue

除了这三个部分外，还有可选的 options 及 options param，如：

javascript 复制代码

vue create myVue --force -r https://registry.npm.taobao.org

--force 和 -r 为 options，其中 --force 没有带参数， -r 的参数为 registry.npm.taobao.org。 --force 为全拼，-r 为简写，至于如何要全拼如何要简写，可以查看 vue-cli 命令的帮助文档。一般脚手架都会有--help 的命令，可以查看命令细节。

javascript 复制代码

vue create --help

以上只是 vue-cli 脚手架命令的组成，不同脚手架因处理逻辑的不同及特定的需要，命令可能更为复杂。

二脚手架执行原理

1 全局安装 vue-cli: npm install -g @vue/cli；

该步骤会在 node 环境中安装 vue-cli 库，注册安装 vue 命令及相应执行文件。

bash 复制代码

执行 which vue 可查看安装位置。（通过 git bash 运行，部分终端不支持 which 命令）

vue-cli 项目根目录的 package.json 中配置的 bin 属性如下，其中 vue 即为主命令。

json 复制代码

"bin": {
    "vue": "bin/vue.js"
}

2 在终端输入 vue create myVue

3 终端解析 vue 命令，并在环境变量中（node/npm）找到 vue 命令。

4 终端根据 vue 命令链接到实际文件 vue.js

bash 复制代码

通过 git bash 输入 which vue，可查看 vue 的位置。

如无特殊配置，windows下一般在 C:\Users\'username'\AppData\Roaming\npm\vue，打开该文件可看到指向的 vue.js。

5 终端利用 node 执行 vue.js

shell 复制代码

执行 node 环境：

#!/usr/bin/env node （在环境变量中查找 node 并执行，一般通用该方式）

#!/usr/bin/node （直接执行 /usr/bin 目录下的 node，每个客户端的 node 位置可能不一样，应避免用该方式）

6 vue.js 解析 command / options 及其参数

7 执行完毕，退出执行

windows 系统与 mac 略有不同：

三脚手架开发及调试流程示例

该流程并不限于"脚手架"开发，npm 库包的开发原理大概都是如此。

1. 开发

1 创建 npm 项目，该过程会创建一个 package.json 文件

csharp 复制代码

npm init -y

2 创建脚手架入口文件，比如 index.js，需在该文件的最上方，输入如下代码：

javascript 复制代码

#!/usr/bin/env node

3 配置 package.json，添加 bin 属性，属性 key 即为主命令，value 为执行命令的入口文件。

javascript 复制代码

"bin": {
    "ex-cli": "index.js" // ex-cli 为主命令 ，index.js 为对应的入口文件
}

4 编写脚手架代码，即根据具体业务需求开发 index.js

javascript 复制代码

// 简单示例：
console.log('hello ex-cli....');

5 发布脚手架到 npm

go 复制代码

a. 注册 https://www.npmjs.com 账号
b. 终端中运行 npm login，登录 npm 账号 
c. 发布：npm publish。成功后可在 npm 网站上查看

注意：
运行命令要在项目根目录中，即与 package.json 同目录，不要在随意的位置上运行。
package.json 中 name 属性的值即为发布的包名，该包名不能与已存在的包重复（可在 npm 网站上搜索检查），否则出现冲突导致发布失败。
镜像须用原始镜像：https://registry.npmjs.org/
偶有网络不稳定发布不上去的情况，多试几次。
更新发布时，需要更新版本号。

2. 使用

1 全局安装。安装后命令将会被注册到系统中，像 vue-cli 一样。(也可运行 which ex-cli 查看相应目录)

scss 复制代码

npm install -g ex-clitest
(卸载： npm uninstall -g ex-clitest)

2 运行命令 ex-cli，node 将会运行 index.js，终端输出 hello ex-cli....

3 如果该包不是脚手架命令的内容，而是各种方法的封装，则完全可以被其他项目引用（npm install xxx）。

3. 本地调试

开发过程中，不可能每次修改都发布到 npm 网站上再 npm install 去调试。正常情况下，在一个包发布之前，我们应在本地调试好。

上述 ex-clitest 包在发布之前，可以运行 npm link 命令，即可将本地当前的项目作为一个库文件链接到 node 全局 node_modules 中，并可执行。

现有两个包内容如下：

javascript 复制代码

/** 工程 1 */
- ex-clitest（文件夹，也就是工程名字）
    - index.js
        // 内容如下：
        #!/usr/bin/env node
        const sum = require('ex-clitest-lib');

        const num = sum(3, 4);
        console.log('hello ex-cli....');
        console.log('num====' + num);

    - package.json
        // 内容如下：
        {
            "name": "ex-clitest", // 发布到 npm 库的名字，可与工程名不同
            "version": "1.0.3", // 版本号
            "description": "", // 描述，npm 网站上显示的本库介绍
            "bin": {
                "ex-cli": "index.js" // 脚手架配置，主命令：对应入口文件
            },
            "main": "index.js", // 工程入口文件
            "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1"
            },
            "keywords": [],
            "author": "",
            "license": "ISC",
            // 依赖 npm install ex-clitest-lib
            "dependencies": {
                "ex-clitest-lib": "^1.0.2" // 依赖的版本号
            }
        }
/** 工程 1 end */

/** 工程 2 */
- ex-clitest-lib（文件夹，也就是工程名字）
    - lib（文件夹）
        - index.js
            // 内容如下：
            function sum(a, b) {
                return a + b;
            }
            module.exports = sum;

    -package.json
        // 内容如下：
        {
            "name": "ex-clitest-lib",
            "version": "1.0.2",
            "description": "",
            "main": "lib/index.js", // 工程入口文件
            "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1"
            },
            "keywords": [],
            "author": "",
            "license": "ISC",
            "devDependencies": {}
        }
/** 工程 2 end */

在不发布的情况下，调试过程如下：

1 将本地项目 ex-clitest 作为一个库文件链接到 node 全局 node_modules 中

javascript 复制代码

cd ex-clitest
npm link

2 将本地项目 ex-clitest-lib 作为一个库文件链接到 node 全局 node_modules 中

javascript 复制代码

cd ex-clitest-lib
npm link

3 将本地项目 ex-clitest 的 依赖 链接到本地的 ex-clitest-lib

javascript 复制代码

cd ex-clitest
npm link ex-clitest-lib

如上，可随时修改随时调试。

取消本地链接：

javascript 复制代码

cd ex-clitest-lib
npm unlink

cd ex-clitest
npm unlink

cd ex-clitest
npm unlink ex-clitest-lib （有时需要手动删除工程里的 node_modules）

四脚手架的价值

脚手架的核心价值是：提升前端研发的效能。比如开发 vue 项目时，使用 vue-cli 会为我们省很多事。

脚手架的三大特性:

自动化: 重复代码拷贝，git操作，发布上线操作等。
标准化：项目创建，发布流程，回滚流程等。
数据化：研发过程系统化、数据化，使研发过程可量化。

前端脚手架实现原理及开发调试流程

一 脚手架简介

二 脚手架执行原理

三 脚手架开发及调试流程示例

1. 开发

2. 使用

3. 本地调试

四 脚手架的价值

一脚手架简介

二脚手架执行原理

三脚手架开发及调试流程示例

四脚手架的价值