从0开发一个高性能前端脚手架-第四篇-脚手架本地开发流程

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

脚手架本地link标准流程

链接本地脚手架

cd your-cli-dir
npm link

链接本地库文件

cd your-lib-dir
npm link
cd your-cli-dir
npm link your-lib

取消本地链接脚手架

cd your-lib-dir
npm unlink
cd your-cli-dir
# link存在
npm unlink your-lib
# link不存在
rm -rf node_modules
npm install -S your-lib

理解npm link：

1.npm link your-lib ：将当前项目中 node_modules 下指定的库文件链接到 node 全局 node_modules 下的库文件

2.npm link ：将当前项目链接到 node 全局 node_modules 中作为一个库文件，并解析 bin 配置创建可执行文件

理解 npm unlink:

1.npm unlink：将当前项目从 node 全局 node_modules 移除

2.npm unlink your-lib ：将当前项目中的库文件依赖移除

脚手架命令注册和参数解析

实现注册一个命令：curry-cli-test init

1.首先在 cli-test-lib 项目下 定义一个 init 方法

module.exports = {
    init(){
        console.log('执行init流程')
    }
}

2.在 cli-test 中 注册 init 命令

#!/usr/bin/env node

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

// 注册一个命令 curry-cli-test init

const argv = require('process').argv;

const command = argv[2];

console.log(command)
if(command){
    if(lib[command]){
        lib[command](); 
    }else{
        console.log('无效的命令')
    }
}else{
    console.log('请输入命令')
}

现在在终端输入 curry-cli-test init

在终端输入 curry-cli-test publish

在终端输入 curry-cli-test

实现带参数的命令：curry-cli-test --name vue-test

1.在 cli-test 中 注册

#!/usr/bin/env node

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

// console.log(lib.sum(1,2))
// 注册一个命令 curry-cli-test init

const argv = require('process').argv;

const command = argv[2];


// 获取 --name vue-test
const options = argv.slice(3);
let [option, param ] =options;

option = option.replace('--','')

console.log(command)
if(command){
    if(lib[command]){
    		// 给 init 方法传入 参数
        lib[command]({ option, param }); 
    }else{
        console.log('无效的命令')
    }
}else{
    console.log('请输入命令')
}

2.在cli-test-lib中 init 方法 引入参数

 init({ option, param }){
        console.log('执行init流程',  option, param)
    }

此时在终端执行 curry-cli-test init --name vue-test。就可以拿到传入的参数了。

实现 --version

// 实现参数解析 --version
if(command.startsWith('--') || command.startsWith('-')){
    const globalOption = command.replace(/--|-/g,'')
    if(globalOption === 'version' || globalOption === 'V'){
        console.log('1.0.0')
    }
}

效果如下：