手记

【金秋打卡】第13天 Web前端架构师2022第一阶段学习第七天

课程章节:
第二周 第二章 2-6 脚手架开发流程和难点解析
第二周 第二章 2-7 快速入门第一个脚手架
第二周 第二章 2-8 脚手架本地调试方法
第二周 第二章 2-9 脚手架本地调试标准流程总结

课程讲师: Sam、张轩

课程内容:

2-6 脚手架开发流程和难点分析

脚手架的开发流程

脚手架开发流程详解

开发流程

  • 创建npm项目
  • 创建脚手架入口文件,最上方添加:
    #!/usr/bin/env node
  • 配置package.json,添加bin属性
  • 编写脚手架代码
  • 将脚手架发布到npm

使用流程

  • 安装脚手架
    npm install -g your-own-cli
  • 使用脚手架
    your-own-cli

脚手架开发难点解析

  • 分包:将复杂的系统拆分成若干个模块
  • 命令注册:
    • vue create
    • vue add
    • vue invoke
  • 参数解析
    vue command [options] <params>
  • options全程: --version--help
  • options简写:-V-h
  • 带params的options:--path /usr/sam/vue-test
  • 帮助文档:
    • global help
      • Usage
      • Options
      • Command
        示例:Vue的帮助信息:
    • command help
      • Usage
      • Options
        vue create的帮助信息:

还有很多,比如:

  • 命令行交互
  • 日志打印
  • 命令行文字变色
  • 网络通信:http、WebSocket
  • 文件处理
  • 等等…

2-7 快速入门第一个脚手架

第一步,创建一个npm项目

  • 创建文件夹imooc-test
  • 进入文件夹,并打开命令行工具
  • npm init -y
  • 从VSCode打开文件夹
  • 创建bin文件夹并在里面创建index.js文件
  • 修改package.json文件
  • 发布项目到npm
    • 先注册npm账号
    • npm login
    • npm publish
  • 返回上一层目录,安装脚手架:npm i -g monster-test
  • 此时全局安装的脚手架会指向本地的monster-test项目,这是npm的智能化做法,让你在本地可以直接调试项目
  • 如果不想要这样的效果,挑出项目所在目录,重新安装脚手架即可

课程收获:
今天开始体系课学习,课程买了好久了,从今天开始我要一步步把它学完!感谢慕课网开设了这个课程,让我有了更好的提升!前端架构师之路从此开启,好好学习,天天向上!

2-8 脚手架本地调试方法

  • 方法一:在脚手架所在目录安装脚手架
  • 方法二:在脚手架目录内,输入npm link,也可以创建本地脚手架

分包

  • 创建monster-test-lib项目
  • 进入项目目录,执行npm link
  • 进入monster-test执行npm link monster-test-lib
  • 然后执行:npm i -S monster-test-lib
  • 但这样安装后,npm并不会自动将依赖保存到package.json文件中,需要手动写入dependencies

2-9 脚手架本地调试标准流程总结

脚手架本地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

理解npm link

  • npm link your-lib:将当前项目中node_modules下指定的库文件链接到node全局node_modules下的库文件
  • npm link:将当前项目链接到node全局node_modules中作为一个库文件,并解析bin配置创建可执行文件

理解npm unlink

  • npm unlink:将当前项目从node全局node_modules中移除
  • npm unlink your-lib:将当前项目中的库文件依赖移除

课程截图:

0人推荐
随时随地看视频
慕课网APP