1 Star 0 Fork 4

view-cli/imooc-lego

forked from yishen/imooc-lego 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

介绍

imooc-cli-dev 为脚手架代码

imooc-cli-dev-server 为模板代码的服务端

lego 为前端代码

项目笔记

第一周:需求分析和架构设计

浅层学习看输入,深入学习看输出!

第二周:脚手架架构设计和框架搭建

创建脚手架流程

image-20230101195520789

package.json 中添加 bin:{"imooc-test":"bin/index.js"}

脚手架参数解析

const process = require('process')
const argv = process.argv

Lerna

lerna 搭建脚手架

lerna init // 初始化 lerna 项目
lerna create core // 通过 lerna 创建分包

分包 name 规则:"name": "@imooc-yishen-cli-dev/core"@imooc-yishen-cli-devOrganizations 名称;core 为分包名称。

lerna 本地依赖实现方式

  "dependencies": {
    "@imooc-yishen-cli-dev/utils": "file:../utils"
  }
// 执行 lerna publish 时lerna 会帮我们将 file:../utils 提换成线上链接

第三周:脚手架核心流程开发

脚手架架构设计

脚手架架构设计图

image-20230105182425298

脚手架拆包策略

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

core 模块技术方案

image-20230105183200138

第四周 脚手架命令注册和执行过程开发

image-20230110220628643

execCommand

image-20230111132743539

第五周 脚手架创建项目流程设计和开发

项目/组件的初始化

image-20230130133002410

第六周 脚手架项目和组件初始化开发

项目/组件初始化中的安装模板步骤

image-20230130095857215

ejs 模板引擎

基本用法

const html = '<div><%= user.name %></div>'
const options = {}
const data = {
  user: {
    name: 'yishen',
    blog:'https://mdashen.com'
  },
}
const data2 = {
  user: {
    name: 'yishen_2',
  },
}
  1. compile 渲染
// compile 相比 渲染变量更消耗资源。所以设计:只需 compile 一次,就可渲染多个template
const template = ejs.compile(html, options)

const compileTemplate = template(data)
const compileTemplate2 = template(data2)
console.log(compileTemplate, compileTemplate2)
// out
<div>yishen</div> <div>yishen_2</div>
  1. render 渲染
ejs.render(html, data, options);
// 不需要反复使用 1. 中的template 可直接使用此方法。若需要对 template 反复使用,建议使用第一种方法。性能有提升
  1. 读取文件渲染
ejs.renderFile(filename, data, options, function(err, str){
    // str => Rendered HTML string
});
// filename 为文件路径。

标签

  • <% 'Scriptlet' tag, for control-flow, no output
  • <%_ 'Whitespace Slurping' Scriptlet tag, strips all whitespace before it
  • <%= Outputs the value into the template (escaped)
  • <%- Outputs the unescaped value into the template
  • <%# Comment tag, no execution, no output
  • <%% Outputs a literal '<%'
  • %%> Outputs a literal '%>'
  • %> Plain ending tag
    • -%> Trim-mode ('newline slurp') tag, trims following newline
  • _%> 'Whitespace Slurping' ending tag, removes all whitespace after it

第七周 B端项目需求分析和架构设计

流程图:https://whimsical.com/mongodb-RTJphPrwzksyotCdA32LQU

需求:https://imooc-lego.yuque.com/imooc-lego/zlz87z

第八周 前端基础技术回顾和巡礼

Typescript

// interface 约束函数
const sum = (x: number, y: number) => {
  return x + y
}
interface Isum {
  (x: number, y: number): number
}
const sum2: Isum = sum

// 可变属性名	
interface RandoMap {
  [propName: string]: string
}
const test: RandoMap = {
  a: 'hello',
  b: 'hello',
}
// interface 约束类
// 实例类型
interface ClockInterface {
  currentTime: number
  alert(): void
}
// 静态类型
interface ClockStatic {
  // new 表示这个约束可以被new调用(即构造函数)
  new (h: number, m: number): void
}
// ClockStatic 用来约束构造函数。ClockInterface用来约束class。静态类型和实例类型共同约束class
// implements 关键词 类来实现接口
const Clock: ClockStatic = class Clock implements ClockInterface {
  currentTime = 0
  alert: () => {}
  constructor(h: number, m: number) {}
}
interface GameInterface {
  play(): void
}
class Cellphone implements ClockInterface, GameInterface {
  currentTime: number
  alert() {}
  play() {}
}
// 泛型
// 第一个T:代表使用泛型 需要使用<>包裹
// 第二个T:代表参数的类型
// 第三个T:代表函数的返回值类型
function echo<T>(arg: T): T {
  return arg
}
const numberResult = echo(1)
const stringResult = echo('123')

image-20230403034047131

// TS 操作类型
interface CountryResp {
  name: string
  area: number
  population: number
}

// keys 联合类型:name ||  area || population
type Keys = keyof CountryResp

type NameType = CountryResp['name']
type Test = {
  [key in Keys]: any
}
type CountyOpt = {
  [p in Keys]?: CountryResp[p]
}

image-20230408214216613

// 泛型约束
interface IWidthLength {
  length: number
}

// 传入的参数 arg 必须携带有 length 属性
function echoWithArr<T extends IWidthLength>(arg: T): T {
  console.log(arg.length)
  return arg
}

const arrs = echoWithArr([1, 2, 3])
const str = echoWithArr('123')
const obj = echoWithArr({ length: 123 })

Vue3

纯函数 pure function

  • 相同的输入,永远会得到相同的输出
  • 没有副作用

watch 遇到非响应式值的情况

image-20230410010310385

第九周 项目整体搭建

第十周 业务组件库初步开发,业务组件属性的展示和更新

与项目业务无关的一些通用知识点

大厂 git 规范讲解

image-20230105163326160

git flow

image-20230419000534679

require 加载资源类型

const pkg = require('../package.json')
// require 支持.js 、.json 文件
  • js 文件:module.exports / exports
  • json文件:JSON.parse 解析成对象
  • .node:c++ 插件,不常用
  • 其他任意文件,当做.js 解析,解析失败报错。解析成功就是js文件。

NodeJS 支持 ES Module

两种标准 CommonJS、ES Module

  • CommonJS: require()、modulex.exports / exports.x
  • ES Module:import、export default / export function/const

通过 webpack 支持模块化

npm i webpack webpack-cli

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './bin/index.js',
  mode: 'development',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.js',
  },
}
// package.json
  "scripts": {
    "dev": "webpack --watch",
    "build": "webpack"
  },
babel 转es5 语法

npm i babel-loader @babel/core @babel/preset-env

// webpack.config.js

const path = require('path')

module.exports = {
  entry: './bin/core.js',
  // mode: 'development',
  mode: 'production',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.js',
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|dist)/,
        use: {
          loader: 'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
        },
      },
    ],
  },
}

通过 Node 原生支持 ES Module

mjs

Node.js's original module system is CommonJs (which uses require and module.exports).

Since Node.js was created, the ECMAScript module system (which uses import and export) has become standard and Node.js has added support for it.

Node.js will treat .cjs files as CommonJS modules and .mjs files as ECMAScript modules. It will treat .js files as whatever the default module system for the project is (which is CommonJS unless package.json says "type": "module",).

See also: Differences between ES6 module system and CommonJs

Node 多进程

  • child_process 中创建的进程就是 Node.js 的子进程

  • spawn:耗时任务,需要不断日志

  • exec/exceFile:开销比较小的任务

// 执行命令
cp.exec('ls -al', (error, stdout, stderr) => {
  console.log('')
})

// 执行文件
cp.execFile(
  path.resolve(__dirname, 'test.shell'),
  ['-al', '-bl'],
  (error, stdout, stderr) => {
    console.log(error)
    console.log(stdout)
    console.log(stderr)
  }
)
const child = cp.spawn(path.resolve(__dirname, 'test.shell'), ['-al', '-bl'], {
  cwd: path.resolve('..'),
})

child.stdout.on('data', function (chunk) {
  console.log(chunk.toString())
})
child.stderr.on('data', function (chunk) {
  console.log(chunk.toString())
})
  • fork:创建一个新进程(子),通过 node 执行
// main
const child = cp.fork(path.resolve(__dirname, 'child.js'))
// 父进程像子进程发送消息
child.send('hello child process', () => {
//   child.disconnect()
})
// 父进程监听子进程的发来的消息
child.on('message', (msg) => {
  console.log(msg)
})

console.log('main pid:', process.pid)
// child
console.log('child process')
console.log('child pid', process.pid)
process.on('message', (msg) => {
  console.log(msg)
})
process.send('hello main process')

result

main pid: 2023
child process
child pid 2024
hello main process
hello child process

命令行交互原理

// TODO 视频跳过了,看完整个项目再回来补。

// TODO 第五章、7-x

空文件

简介

慕课网前端架构师课程笔记。https://class.imooc.com/sale/fearchitect 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/view-cli/imooc-cli-dev.git
git@gitee.com:view-cli/imooc-cli-dev.git
view-cli
imooc-cli-dev
imooc-lego
master

搜索帮助