乐趣区

关于javascript:脚手架开发流程

脚手架开发流程详解

  • 创立 npm 我的项目 npm init -y
  • 创立脚手架入口文件,最上方增加:
    #!/usr/bin/env node
  • 配置 package.json, 增加 bin 属性
  • 编写脚手架代码
  • 将脚手架公布到 npm 上

    应用流程

  • 装置脚手架
    npm install -g your-own-cli

    脚手架开发难点解析

  • 分包:将简单的零碎拆分成若干个模块
  • 命令注册:

     vue vreate
     vue add
     vue invoke
  • 参数解析:
    vue command [options] <params>

    • options 全称:–version,–help
    • options 简写:-V,-h
    • 带 params 的 options:–path /Users/jianjun/Desktop/vue-test
    • 帮忙文档

      • global help

        • Usage
        • Options
        • Commands
      • command help

        • Usage
        • Options

    其余一些难点

  • 命令行进行交互
  • 日志打印
  • 命令行文字变色
  • 网络通信:http/websocket
  • 文件解决
  • 。。。。

    脚手架本地 link 规范流程

    链接到本地脚手架

    cd you-cli-dir
    npm link

    链接本地库文件:

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

    勾销链接本地库文件

    cd your-lin-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:将以后我的项目中的库文件依赖移除
退出移动版