专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

从0开发一个高性能前端脚手架-第三篇-简单实现一个脚手架

ins518 2024-09-24 18:13:28 技术文章 15 ℃ 0 评论

脚手架开发难点解析

  1. 分包:将复杂的系统拆分成若干个模块
  2. 命令注册:
vue create
vue add
...

3.参数解析

vue command [options] <params>

options全称:--version --help

options的缩写: -v -h

带params的options: --path

帮助文档:

global help

Usage

Options

Commands


command help

Usage

Options

还有其他:

命令行交互

日志打印

命令行文字变色

网络通信

文件处理

。。。

动手写一个简单的脚手架

  1. 创建 文件夹 & 初始化 npm 项目
mkdir cli-test
cd cli-test
npm init -y

2.在 根目录 创建 bin/index.js,并在inde.js中 指明 node 环境

#!/usr/bin/env node

console.log('cli test')

3.在package.json中 指定 脚手架名称 和入口文件

"bin": {
    "cli-test": "bin/index.js"
},

4.登录 npm 并发布

5.在终端安装并使用 脚手架

本地调试方法

  1. npm link。就是创建软连接

2.在脚手架 上级目录,全局安装后,进行调试。

多个包如何调试?

1.创建两个包,分别是 cli-test 和 cli-test-lib

2.在cli-test-lib,执行npm link

3.进入 cli-test,执行 npm link cli-test-lib 此时就可以在cli-test中使用cli-test-lib了。

4.在 cli-test-lib 中 lib/index.js写个方法

module.exports = {
    sum(a,b){
        return a+b;
    }
}

5.在cli-test中引入 cli-test-lib方法

#!/usr/bin/env node

const lib = require('cli-test-lib');

console.log(lib.sum(1,2))

console.log('cli test')

6.在终端直接执行 cli-test。可以看到执行效果。



本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表