搭建自己的脚手架(一)---准备阶段开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

前言

最近准备搭建一个自己的脚手架

为什么要搭建一个自己的脚手架？

在搭建koa环境的时候，虽然也有成熟的框架koa-generator,但是每次都要改很多东西，很不方便，效率太低了，浪费了我摸鱼的时间。所以准备搭建一个自己的脚手架，类vue-cli那种的，然后上传自己的模板，可以下载自己的模板，想想都觉得很哇塞

脚手架初始化

新建目录 ws-koa2-cli 初始化仓库

npm init -y

本地安装lerna,如果对lerna库还不是很了解的同学，可以查看我的另一篇文章[lerna包管理神器](lerna包管理神器 - 掘金 (juejin.cn))

npm i lerna -D

接下来lerna初始化

lerna init

此时目录结构如下

核心流程

脚手架拆包

拆包策略是按照功能划分的，前端脚手架一般按照模块功能分为:

核心模块：core
命令模块：commands
工具模块：utils

接下来我们按照功能模块在根目录依次创建core/commands/utils目录

现在遇到一个问题, lerna.json中的package属性指向的是package文件夹下面的包，如果我们想在core中加入一个新包的话只能放在package下面，这样就不利于包的管理了，所以我们把core/commands/models/utils这几个包放到跟目录下

再修改lerna.json

{
  "version": "1.0.12",
  "packages": [
    "commands/*",
    "models/*",
    "core/*",
    "utils/*"
  ]
}

现在我们就可以把core/commands/utils当成packages，这样更利于我们管理代码。

包的创建

拆包之后，我们如何创建包呢？其实，还是跟原来一样：

// 在utils文件夹下创建@wson-koa2-cli/log包
lerna create @wson-koa2-cli/log utils

打印日志功能

此处我们要使用npmlog库,npmlog库可以设置日志登记和颜色

'use strict';

const log = require('npmlog');

//根据环境变量定义log等级
log.level = process.env.LOG_LEVEL ? process.env.LOG_LEVEL : 'info'; 
// 自定义log, 使用log.success('success')就可以使用
log.addLevel("success", 2000, { fg: 'green', bold: true }); 

log.heading = 'ws'; // 添加log前缀
// 前缀的样式
log.headingStyle = { fg: 'red', bg: 'white' }

module.exports = log;

命令运行功能

在core中创建命令行模块

lerna create @wson-koa2-cli/cli core

接着我们创建一个bin也就是命令行脚本

创建bin/index.js

import-local库

what is import-local?

import-local的作用:当全局node_modules和本地node_modules中，存在相同的库，则优先加载本地node_modules中的库

以全局和本地都有lerna库为例，看import-local执行过程

我们在命令行执行命令的时候，会执行全局的bin下面的脚本, 此时就会触发importLocal的判断，如果本地也存在相同的npm 包，那么加载本地的包，如果本地不存在此包，那么就执行远程本包lib/index.js文件

此处我们需要引入我们封装的log

此时就可以在node_module中看到我们引入的包了，并且log也是软连接，指向我们本地的log包, 此时只要我们本地的log改变,引入的包也会跟着改变的

在package.json中引入我们自己的包，因为是本地包，所以采用file的方式进行引入(如果不想使用file这种方式，而想使用npm link方法的也是可以的，可以看我另一篇文章npm包本地调试的n种快捷的方法 - 掘金 (juejin.cn)理解本地包调试的原理)

  "dependencies": {
    "@wson-koa2-cli/log": "file:/Users/wson/Desktop/wson-koa2-cli/utils/log"
  }

注意file后面千万不要有空格，否则会报Module Not Found

#! /usr/bin/env node

const importLocal = require('import-local');
const log = require('@wson-koa2-cli/log');

// 如果本地存在相同的包，则加载本地的包，并返回true，如果不存在则返回false
if (importLocal(__filename)) {
  log.info('cli', 'use local package version');
} else {
  log.info("cli", "start run");
  require('../lib')(process.argv.slice(2));
}

在package.json中创建bin命令

 "bin": {
    "wson-koa2-cli": "bin/index.js"
  },

此时我们npm link,创建全局软连接，这样在命令行执行命令

此时控制台打印start run, 完全符合预期， good

搭建自己的脚手架(一)---准备阶段

前言