前端反卷计划-脚手架-从0实现一个脚手架

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 前端反卷计划-脚手架-从0实现一个脚手架

脚手架开发流程

开发流程

1.创建 npm 项目
2.创建脚手架入口文件,最上方添加:

#!/usr/bin/env node

3.配置 package.json ,添加 bin 属性
4.编写脚手架代码
5.将脚手架发布到 npm

使用流程

1.安装脚手架

npm install -g your-cli

2.使用脚手架

your-cli

脚手架开发难点解析

  1. 分包:将复杂的系统拆分成若干个模块

  2. 命令注册

    vue create
    vue add
    ...
    
  3. 参数解析

    vue command [options] <params>
    

    
    还有其他:
    命令行交互
    日志打印
    命令行文字变色
    网络通信
    文件处理

动手写一个简单的脚手架

  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 并发布

image.png

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

本地调试方法

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

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

多个包如何调试?

1.创建两个包,分别是 cli-test 和 cli-test-lib
2.在cli-test-lib,执行npm link
image.png

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

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。可以看到执行效果。
image.png

脚手架本地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('请输入命令')
}

3.现在在终端输入 curry-cli-test init
image.png

4.在终端输入 curry-cli-test publish
image.png

5.在终端输入 curry-cli-test
image.png

原生脚手架开发痛点分析

痛点一:重复操作
1.多package本地link
2.多package依赖安装
3.多package单元测试
4.多package代码提交
5.多package代码发布

痛点二:版本一致性
1.发布时版本一致性
2.发布后相互依赖版本升级
登录 npm 并发布
结论:package越多,管理复杂度越高

lerna开发脚手架流程

image.png



相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)
从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)
113 0
|
6月前
|
Web App开发 JavaScript 前端开发
从脚手架开始学前端 【第2期】Node.js环境搭建(windows)
从脚手架开始学前端 【第2期】Node.js环境搭建(windows)
90 0
|
JSON 前端开发 JavaScript
从零打造你的前端开发脚手架
从零打造你的前端开发脚手架
211 0
|
28天前
|
资源调度 前端开发 JavaScript
前端研发链路之脚手架
本文首发于微信公众号“前端徐徐”。文章介绍了前端开发中脚手架工具的重要性及其工作原理。脚手架工具能够大幅提升开发效率,确保代码质量和项目一致性。文章详细探讨了脚手架的历史、工作原理、常见工具及其优势与潜在问题,并展望了其未来发展方向,帮助开发者更好地理解和应用脚手架工具。
25 4
前端研发链路之脚手架
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
3月前
|
JavaScript 前端开发
什么是前端构建工具?vite和vite脚手架的关系!
【8月更文挑战第1天】前端构建工具简析
78 4
|
6月前
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
6月前
|
JavaScript 前端开发 jenkins
前端反卷计划-脚手架-原理介绍
前端反卷计划-脚手架-原理介绍
|
JavaScript 前端开发 Java
【前端】Vue2 脚手架模块化开发 -快速入门
1.搭建 Vue 脚手架工程,需要使用到 NPM(node package manager), npm 是随 nodejs 安装 的一款包管理工具 , 类似 Maven 。所以我们需要先安装 Nodejs 2. 为了 更好兼容 ,这里我们安装 node.js10.16.3 , 要求同学们也使用这个版本 ( 因为这里 只是演示 Vue 脚手架工程 ), 后面我们还会讲解 Vue3 的脚手架工程搭建 , 再对 Node 升级 .
|
21天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。