今日前端

# 第一章：本周导学

本周整体内容介绍和学习方法 标题 脚手架需求分析和架构设计，核心流程开发

收获

  • 架构设计和技术方案设计全过程
  • 脚手架核心流程和commander框架
  • 如何让Node项目支持ES Module

主要内容

  • 脚手架需求分析和架构设计
  • 脚手架模块拆分策略和core模块技术方案
  • 脚手架执行准备过程实现
  • 脚手架命令注册实现(基于commander)

加餐 Node项目如何支持ES Module

# 第二章：脚手架整体架构设计

2-1 大厂是如何做项目的 3-1

2-2 前端研发过程中的痛点和需求分析 3-2

2-3 加餐：大厂的git操作规范是怎样的？

  • clone下来的项目 master分支是不做开发的，我们会新建一个dev分支，上线以后会新建一个release分支。

3-3

2-4 高端操作：脚手架架构设计+绘制架构图 / 2-5 架构设计图绘图技巧分享

3-4

# 第三章 脚手架模块拆分策略和core模块技术方案

3-1 脚手架模块拆分策略

  • 核心流程：core
  • 命令： commands 【初始化、发布、清除缓存】
  • 模型层： models 【Command命令 、 Project项目 、 Component组件 、 Npm模块 、 Git仓库】
  • 支撑模块：utils 【Git操作 、 云构建 、 工具方法 、 API请求、 Git API】

3-2 core模块技术方案

准备阶段： 3-5

# 第四章：脚手架执行准备过程实现

4-1 脚手架框架代码拆包+import-local应用

  • mkdir cloudscope-cli
  • cd cloudscope-cli
  • npm init -y
  • 添加 .gitignore文件
  • lerna init
  • lerna create cli & lerna create utils
  • mkdir commands & mkdir models & mkdir core & mkdir utils
  • 将packages下core移到外层core、utils移到外层utils,删除packages目录
  • 修改lerna.json文件：
{
  "packages": [
    "core/*",
    "commands/*",
    "models/*",
    "utils/*"
  ],
  "version": "1.0.4"
}
  • 在cloudscope-cli/core/cli下新建bin/index.js文件
  • 修改 cloudscope-cli/core/cli下的package.json配置文件，添加如下代码
……
 "bin": {
    "cloudscope-cli": "bin/index.js"
  },
    
 ……
 "dependencies": {
    "@cloudscope-cli/utils": "file:../../utils/utils",
    "import-local": "^3.0.2",
    "npmlog": "^4.1.2"
  },
  • cd core/cli
  • npm install
  • 在cloudscope-cli/core/cli/bin/index.js下添加如下代码：
#! /usr/bin/env node

const importLocal = require('import-local')

if(importLocal(__filename)){
  require('npmlog').info('cli','正在使用 cloudscope-cli 本地版本')
}else{
  require('../lib')(process.argv.slice(2))
}
  • 在cloudscope-cli/core/cli/lib/index.js 文件中添加一行日志文件
  • npm link
  • cloudscope-cli:即可看到输出日志

git代码提交扩展 我将此代码通过分支的形式，对每一次的代码提交，都在一个特殊的分支进行代码提交。 本节提交到该分支： lesson01 (opens new window)

下面是分支提交小记录。

  • git checkout -b lesson01

  • git add . && git commit -m 'lesson01 for init ' && git push origin lesson01

  • git checkout main

  • git merge lesson01

  • git push

  • 删除本地分支 git branch -D lesson01

  • 如果后面我们想要修改该分支代码并提交到该分支，我们就可以：

  • git checkout -b temp origin/lesson01

4-2 检查版本号功能开发（require加载资源类型讲解+npmlog封装)

从本节开始本地新建分支 lesson02，最后将此分支代码推送至远程仓库cloudscope-cli (opens new window)。

  1. 本节代码开发过程中在命令行用到的命令：
  • utils下新建log包： lerna create @cloudscope-cli/log utils
  • log下安装npmlog包： lerna add npmjs utils/log
  1. 其它记录的小知识点
  • require加载资源的类型：
  • .js ： 必须输出一个module.exports || exports.
  • .json : 会通过JSON.parse()对该文件进行解析，并输出一个对象
  • .node ： c++的一个插件，它的实现原理是通过 process.dlopen去打开一个c++插件，通常不使用。
  • any ：会通过.js引擎进行解析
  1. npmlog源码：
  • default level: info，可以通过传入的参数进行level定制。
  • 源码中存在的 log.addLevel()才可以打印，我们也可以通过这个方法定制自己的打印设置。（可以设置名字、value值大小，字体色、背景色等）
  • 可以通过 log.heading定制输日志输出的前置。同时可以通过headingStyle做样式修改。

4-3 最低Node版本检查功能开发

检查Node版本号的原因以及解决办法：

  • 这是因为一些低版本的Node API在低版本是不支持的，因此要设置一个最低的Node版本号。
  • 拿到本地版本号的方法为：process.version
  • 版本号比对：第三方库 semver。
  • 抛出异常颜色输出：第三方库 colors:引用'colors/safe',使用：colors.red('')

4-4 root账号启动检查和自动降级功能开发

检查账号权限原因以及解决方法：

  • 如果是使用root权限，一些文件就没有可读或者修改权限，因此需要对用户进行查询与降级处理
  • 通过process.geteuid() 获取登录用户的ID ,501为普通用户，0 为超级管理员(root)
  • 检查第三方库：root-check。使用方法引入一下调用即可降级。
  • root-check实现原理：调用downgrade-root 库 -> 判断是否为root权限 -> 若是通过process.env.SUDO_UID或者默认 defaultUid() 获取各个操作系统的uid

4-5 用户主目录检查功能开发

  • user-home:可以实现跨操作系统获取用户主目录的功能。

  • path-exists:判断文件目录是否存在

  • user-home实现：调用os-homedir库，再调用os库，若os库有homedir直接返回，若没有直接拿process.env.home(),还是没有就拼接 ‘/Users/'+process.env.USER

  • path-exists实现：直接调用fs的accessSync(path)方法。

4-6 入参检查和debug模式开发

这里就进行如参检查，是要判断是否进入调试模式，如果带有 --debug参数，我们要进行log的level设置。

  • 实现方式：使用minimist第三方库。
  • 查看是否包含debug参数，直接：require('minimist')(process.argv.slice(2)).debug即可。
  • 若上值为true，直接修改log.level即可。

4-7 环境变量检查功能开发

  • 检查环境变量，我们使用第三方库：dotenv。
  • 用法：require('dotenv').config({ path: '' }) ：若不传参数，我们在当前目录下拿到.env文件中的变量，之后就可以直接在process.env中使用了。支持传入path变量。
  • 环境变量其实就是一个全局变量,如果我们有很多的环境变量需要使用，可以直接在.env文件宏进行配置

4-8 通用npm API模块封装 | 4-9 npm全局更新功能开发 准备阶段的最后一个功能：检查我们的这个脚手架是否为最新版本

步骤：

  1. 获取当前版本号与模块名: pkg.version | pkg.name
  2. 调用npm API获取所有模版号：

npm提供了这样一个API: https://registry.npmjs.org/cloudscope-cli/core ,可以获得该包的所有版本号,要从这里拿到所有版本号，我们需要使用第三方库 axios,同时我们也需要添加一个用来url拼接的库：url-join，可以帮助我们进行多参数的拼接，以及我们进行版本对比的第三方库 semver。 3. 获取所有版本号，比对哪些版本号是大于当前版本号 3. 获取最新的版本号，提示用户更新到此版本。

将以上代码提交支仓库远程cloudscope-cli的分支 lesson02 (opens new window)，并合并至main分支。 **

# 第五章：脚手架命令注册实现(基于commander）

5-1 快速实现一个commander脚手架 ｜ 5-2 commander脚手架全局配置 之前在学习命令注册的时候，使用的是yrags，本节使用另一个库 commander去实现命令注册 本节代码提交至：liugezhou-yargs-demo (opens new window) 其中 bin/yargs.js是之前学习yargs的demo代码。 bin/commander.js是本节关于commander的代码。

我们在这个库的基础上，学习commander的简单用法.

  • 首先，安装npm i -S commander
  • 然后，在bin/index.js中：
#!/usr/bin/env node

const commander = require('commander')
const pkg = require("../package.json")

// 获取commander的单例
// const {program} = commander

// 手动实例化一个Command示例
const program = new commander.Command()

program
  .name(Object.keys(pkg.bin)[0])
  .usage('<command> [options]')
  .version(pkg.version)
  .option('-d, --debug', '是否开启调试模式', false)
  .option('-e, --envName  <envName>' , '环境变量')
  .parse(process.argv);

  const options = program.opts()
  console.log(options.debug)
  program.outputHelp()   //打印出帮助信息
  • liugezhou-test -V,即可看到输入版本号。
  • liugezhou-test -d // true 5-3 commander脚手架命令注册的两种方法

课程所讲内容：commander命令注册有两种方式：

  1. comman API注册命令
  2. addCommand API 注册命令

现在默认安装commander时，已更新到7.0.0，sam老师写法还是6.X，可参考 commader for git (opens new window) 配置。本节内容就是对官方文档更新用法之后的学习笔记：

  1. Commander.js : 完整的node.js命令行解决方法

  2. 声明commander变量 为简化声明，Commander提供了一个全局对象

const { program } = require('commander')
program.version('0.0.1')

若程序较为复杂，用户需要以多种方式来使用Commander，如单元测试等，可采用创建本地Commander对象的方法

const {Command } = require('commander')
const program = new Command();
program.version('0.0.1')
  1. 选项
program
//Commander 使用.option() 方法来定义选项，同时可以附加选项的简介
	.option('-d,--debug','booelan') 
//选项可以设置一个默认值。
	.option('-c, --cheese <type>', 'add the specified type of cheese', 'blue');
//必填选项
	.requiredOption('-n, --name <type>', 'name must have cheese');
//通过program.parse(arguments)方法处理参数
program.parse(process.argv)
const ret = program.opts()
const debug = ret.debug
  1. 命令
program.
//参数支持必须<>,可选[]
	command('clone <source> [destination]')

//在参数名后加上...来声明可变参数，且只有最后一个参数支持这种用法
program
    .command('rmdir <dirs...>')
    .action(function (dirs) {
      dirs.forEach((dir) => {
        console.log('rmdir %s', dir);
      });
    });

5-4 commander注册命令的两种高级用法 ｜5-5 再讲3条commander的高级用法

  1. 监听所有命令输入 : arguments
  2. 脚手架串行使用
   program
      .command('install [name]','install package',{
        executableFile:'vue'，
     		isDefault:true,
 	      hidden:true //command的隐藏
      })
      .alias('i')
  1. 高级定制help信息
  • program.outputHelp()
  • _ program.helpInformation() = function(){}_
  • program.on('--help'),function(){ console.log('your help information'}
  1. 高级定制debug模式
program.on('optins:debug',function(){
  if(program.debug){
  process.env.LOG_LEVEL = 'verbose'
  }
}
  1. 对未知命令监听二：
program.on('command:*',function(obj){
      console.log(obj)
      console.log('未知的命令：' + obj[0])
      const avaliableCommands = program.commands.map( cmd => cmd.name())
      console.log('可用命令：'+ avaliableCommands.join(','))
  })

# 第六章 Node项目如何支持ES Module【加餐】

6-1 通过webpack完成ES Module资源构建 模块化

  • CMD/AMD/require.js
  • CommonJS: 加载：require(), 输出：module.exports() || exports.x
  • ES Module: 加载： import, 输出 export.default || export function || export const

实现

  • npm i -D webpack webpack-cli
  • touch webpack-config.js
//webpack-config.js
const path = require('path')
module.exports = {
  entry: './bin/core.js',
  output:{
    path:path.join(__dirname,'/dist'),
    filename:'core.js'
  },
  mode:'development'
}

// index.js
#! /usr/bin/env node

require('./core')


// core.js
import utils from './utils'

utils()

// utils
module.exports = function(){
  console.log('kskaksk')
}
  • 在package.json中添加两个script，分别为 "build":"webpack"和"dev":"webpack -w"
  • 上面代码通过 npm run build 打包后，将上面index.js中的require修改为 require("../dist/core.js")
  • 执行 liugezhou-test 看到构建成功。

6-2 通过webpack target属性支持Node内置库

  • webpack的target使用
// npm i -S path-exists
// bin/utils.js
import pathExists from 'path-exists'
export function exists(p){
  return pathExists.sync(p)
}

// bin/core.js
import path from 'path'
import {exists} from './utils'

console.log(path.resolve('.'))
console.log(exists(path.resolve('.')))

// webpack.config.js
...
	target:"node"
  • core.js代码添加
(async function(){
    await new Promise(resolve => setTimeout( resolve,1000));
    console.log('ok')
})()

6-3 webpack loader配置babel-loader支持低版本node

配置一个最简单babel-loader,需要安装的库 npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime-corejs3

const path = require('path')
module.exports = {
  entry:'./bin/core.js',
  output:{
    path: path.join(__dirname,'/dist'),
    filename:'core.js'
  },
  mode:'development', //开发模式
  // target: 'web'//默认
  target:'node', // 识别内置库
  module:{
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets:['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  corejs:3,
                  regenerator:true,
                  useESModules:true,
                  helpers: true
                }
              ]
            ]
          }
        }
      }
    ]
  }
}

6-4 通过Node原生支持ES Module

将node版本升级到14.x，代码中将引用的文件，改写后缀名为 .mjs即可。

错误反馈 (opens new window)
上次更新: 10/18/2022, 5:58:40 PM

← 04-脚手架命令注册和执行过程开发 →