为什么开发脚手架?
提高前端研发效能,使开发自动化、标准化。
一、脚手架开发入门
1、为什么终端可以直接调用yarn?
npm i -g yarn
yarn -v
# 1.22.17
执行 `npm config ls` 查看npm配置
windows系统
prefix配置 即为npm全局包的安装目录,同时这个地址配置到了系统环境变量中。
可以通过 `npm config set prefix "D:\npm"` 更改
yarn --------- bash
- yarn.cmd ---- command
- yarn.ps1 ----- powershell
MacOS系统
mac系统下node中的bin文件目录配置到了环境变量
执行 npm i -g yarn 的时候发了什么?
- 下载yarn安装包到node的 ./lib/node_modules/ 目录下
- 读取yarn的package.json的bin对象的键,在node的bin文件夹中创建yarn的快捷方式
其中yarn文件第一行文件声明用node去执行
#!/usr/bin/env node
# 命令行输入 yarn 的时候实际上是执行的是
node yarn.js
2、命令行和命令行工具
1)如何解析命令行输入的参数
在node的bin文件夹下新建一个abc文件内容如下、并在终端执行 `abc --demo aa bb`
#!/usr/bin/env node
console.log('this is abc...');
console.log(process.argv)
总结:我们可以通过获取 process.argv 得到输入的参数,并进行相应的逻辑处理。
2)命令行工具和常用插件
命令行输入约定
不支持在 Docs 外粘贴 block
1)命令注册解析工具
- commander
- yargs
- meow
commander基本用法
const { Command } = require("commander");
const program = new Command();
program
.name('demo')
.usage('<command> [options]')
.version("1.0.0");
// 注册一个add 命令
program.command("add [option]")
.description("这是...")
.action((option, cmdObj) => {
console.log(option)
});
program.parse(process.argv);
2)常用插件
- Inquirer
- 命令行询问用户问题,记录回答结果
- chalk、colors
- 控制台输出内容加颜色
- ora
- 控制台 loading 样式
- download-git-repo
- 下载远程模板
- easy-table
- 控制台输出表格
- cross-spawn
- 支持跨平台调用 node的spawn和spawnSync.
- shelljs
- 用js写shell
- fs-extra
- fs增强版
- mrm-core
- 快速修改配置(package.json、.gitignore、.eslintrc 等)
- minimist
- 传入参数检查
二、脚手架开发完善
不支持在 Docs 外粘贴 block
1、检查node版本
防止用户本地node版本过低
// GET: registry + name
// https://pkgs.d.xiaomi.net/artifactory/api/npm/mi-npm/@mi/test
const url = 'https://registry.npmjs.org/yarn';
axios.get(url).then((response)=>{
if(response.status === 200){
const data = response.data;
const latest = data?.["dist-tags"]?.latest;
console.log('latest',latest)
}
})
默认情况下,npm publish会使用标记标记您的包latest。如果使用该--tag标志,则可以指定要使用的另一个标记。
3、检查root启动
防止出现用root操作的文件,其他用户不能修改的问题,一旦检查到是root启动,需要降级处理
// POSIX
process.geteuid();// 0 root启动 501普通用户启动
const rootCheck = require("root-check");
rootCheck();// 用户降级
4、检查用户主目录、写入缓存
检查到存在用户主目录,之后可以做以下优化操作,这样下次再启动的时候可以更加快速地运行
- 写入符合用户习惯的配置
- 缓存大文件
const homeDir = require('homedir');
console.log(homeDir()) // /Users/admin
5、如何多包开发管理
多包开发的痛点
多包开发本地link、安装依赖、发布、版本一致性等问题
lerna 是一个优化基于git+npm的多package项目的管理工具
用法如下
# 创建package
lerna create <name>
# 安装依赖
lerna add # 给所有包安装依赖
lerna add packages/core/ # 只给core安装依赖
# 链接依赖
lerna link
# 发布
lerna publish
本文暂时没有评论,来添加一个吧(●'◡'●)