同步操作将从 yishen/imooc-lego 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
imooc-cli-dev
为脚手架代码
imooc-cli-dev-server
为模板代码的服务端
lego
为前端代码
浅层学习看输入,深入学习看输出!
package.json 中添加 bin:{"imooc-test":"bin/index.js"}
const process = require('process')
const argv = process.argv
lerna init // 初始化 lerna 项目
lerna create core // 通过 lerna 创建分包
分包 name 规则:"name": "@imooc-yishen-cli-dev/core"
,@imooc-yishen-cli-dev
为 Organizations
名称;core
为分包名称。
"dependencies": {
"@imooc-yishen-cli-dev/utils": "file:../utils"
}
// 执行 lerna publish 时lerna 会帮我们将 file:../utils 提换成线上链接
execCommand
项目/组件的初始化
项目/组件初始化中的安装模板步骤
const html = '<div><%= user.name %></div>'
const options = {}
const data = {
user: {
name: 'yishen',
blog:'https://mdashen.com'
},
}
const data2 = {
user: {
name: 'yishen_2',
},
}
// 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>
ejs.render(html, data, options);
// 不需要反复使用 1. 中的template 可直接使用此方法。若需要对 template 反复使用,建议使用第一种方法。性能有提升
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流程图:https://whimsical.com/mongodb-RTJphPrwzksyotCdA32LQU
需求:https://imooc-lego.yuque.com/imooc-lego/zlz87z
// 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')
// 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]
}
// 泛型约束
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 })
纯函数 pure function
watch 遇到非响应式值的情况
const pkg = require('../package.json')
// require 支持.js 、.json 文件
module.exports
/ exports
两种标准 CommonJS、ES Module
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"
},
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']
}
},
},
],
},
}
mjs
Node.js's original module system is CommonJs (which uses
require
andmodule.exports
).Since Node.js was created, the ECMAScript module system (which uses
import
andexport
) 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
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())
})
// 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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。