前端脚手架搭建—基础版本脚手架搭建

82 阅读2分钟

搭建基础版本脚手架

开发流程

  • 创建 npm 项目
mkdir yiye-cli-test
cd yiye-cli-test
npm init -y
  • 创建脚手架入口文件,最上方添加:
#!/usr/bin/env node
  • 编写脚手架代码 image.png

  • 配置 package.json,添加 bin 属性

"bin": {
    "yiye-cli-test": "bin/index.js"
 }
  • 将脚手架发布到 npm 通过npm login 登录 npm 在 通过 npm publish 发布

image.png


使用流程

  • 安装脚手架
npm i -g yiye-cli-test
  • 使用脚手架
yiye-cli-test

调试流程

当安装好脚手架后, 修改本地代码,运行能够实时显示最新内容, 这是npm自身的调试

image.png

本地开发调试

移除刚才安装的脚手架

npm uni -g yiye-cli-test
  • 在项目目录下使用npm link 创建本地脚手架, 实现软连接
  • 取消软连接npm unlink

多项目本地开发调试

新增一个yiye-cli-lib-test的项目,yiye-cli-test 需要使用, 项目的创建方式如上, yiye-cli-lib-test项目中增加导出方法

image.png

//lib/index.js
module.exports = {
  sum(a, b) {
    return a + b;
  }
};

  • yiye-cli-lib-test 项目 执行npm link
  • yiye-cli-test 安装 yiye-cli-lib-test 这个包 进入到yiye-cli-test的根目录
npm link yiye-cli-lib-test
  • 在yiye-cli-test 中的package.json 手动添加版本
"dependencies": {
    "yiye-cli-lib-test": "^1.0.0"
 }
  • 使用yiye-cli-lib-test
const lib = require('yiye-cli-lib-test');
console.log('lib', lib.sum(1, 2));

上传yiye-cli-lib-test

yiye-cli-lib-test包本地开发正常后,需要上传到npm上,在给yiye-cli-test 项目中使用, 流程如下:

  • 在yiye-cli-test项目中取消yiye-cli-lib-test包的软连接
npm unlink yiye-cli-lib-test
  • 在yiye-cli-test项目中安装yiye-cli-lib-test
npm i yiye-cli-lib-test

当需要再调试yiye-cli-lib-test的时候,再次在yiye-cli-test项目中执行npm link yiye-cli-lib-test方可进行调试

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

  • 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:将当前项目中的库文件依赖移除