xiaduokun-react-cli
v1.0.1
Published
自定义react脚手架工具
Downloads
7
Readme
编写脚手架
- 自定义的命令 而不是node去执行我们的脚本
- -V --help create 命令行交互工具
- 去下载模板 isTS 下载ts版本 不要就下载js版本
模板仓库地址
https://gitee.com/chinafaker/vue-template.git
https://gitee.com/xiaduokun/my-react-cli.git
-js -ts
步骤
新建/src/index.js, /src/utils.js
执行npm init -y 命令
解释: 是一个用于快速初始化一个新的Node.js项目的命令。这里,npm 是Node.js的包管理器,而 init 是用来创建一个新的package.json文件的命令。
具体解释如下:
npm init: 这个命令会引导你通过一系列的问题来创建一个package.json文件。package.json文件是Node.js项目的核心文件,它包含了项目的元数据(如名称、版本、描述等)以及项目的依赖信息。 -y 或 --yes: 这是一个可选的标志,当你加上这个标志时,npm init命令会自动使用默认值来填充package.json文件,而不会提示你回答任何问题。这可以大大加快初始化过程,特别是当你只是想快速创建一个简单的项目而不需要定制package.json中的每一个字段时。 所以,npm init -y命令会立即生成一个使用默认值的package.json文件,而不需要用户进行任何输入。
使用npm 安装commander 模块, inquirer 模块, ora模块, download-git-repo 模块 npm i commander inquirer ora download-git-repo
解释: commander: 是一个用于创建命令行界面的Node.js模块,它提供了一个简洁的API来创建具有子命令和选项的命令行工具。(创建命令行的) inquirer: 是一个用于从终端用户获取输入的Node.js模块,它支持多种类型的问题,如确认、单选、多选、输入、密码等等。(跟命令行交互的工具) ora: 是一个用于在终端中显示加载动画的Node.js模块,它非常适合在需要一段时间才能完成的异步任务中使用。 download-git-repo: 是一个用于从GitHub或其他Git仓库下载模板的Node.js模块,它可以直接下载模板仓库的完整代码。
在index.js写入 #!/usr/bin/env node 解释: 告诉操作系统我执行自定义命令的时候, 你帮我用node执行 这个文件
在package.json文件中添加type, bin字段
"type" : "module", "bin": { "test-cli": "src/index.js" }解释: type: 设置为module, 表示我们的src/index.js文件是使用ES6语法编写的 bin: 是npm的一个特性,我们可以通过npm link命令将我们的脚手架连接到全局环境,这样我们就可以在任何地方执行自定义的命令了。 bin 的键值对,键表示我们自定义的命令名称,而值表示我们命令的实际执行文件路径。
这里“test-cli”就是我们自定义的命令名称, 可以随便写
执行npm link 命令,将脚手架连接到全局环境 解释: npm link 命令, 会创建一个软连接,将我们脚手架的index.js文件 软连接挂载到全局环境, 也就是说 我们在任意目录下都可以执行我们自定义的命令了
控制台执行test-cli 就会发现命令行中执行了src/index.js中的代码
接下来想实现的功能:创建自己的命令 test-cli create summer-morekun, 生成项目目录
8. 在index.js中
js
import { program } from 'commander'
program.parse(progress.argv)
// 返回的是一个数组
用于解析获得命令行中输入的参数,比如test-cli create summer-morekun 中的create summer-morekun
```js
import { fs } from 'node'
let json = fs.readFileSync('./package.json')
json = JSON.parse(json)
console.log(json)
```
```
通过node的fs模块, 读取package.json, 读取完是个json字符串, 需要解析为json对象, 即将文件内容读取为json对象
```js
program.version = json.version
```
这样就获取到项目的版本号了问: 在nodejs中, src/index.js中读取和src平级的package.json文件, 为什么使用的路径是let json = fs.readFileSync('./package.json'), 使用let json = fs.readFileSync('../package.json')会报错
答: 在Node.js中,路径的解析是基于当前工作目录(Current Working Directory, CWD)和给定路径的。fs.readFileSync 函数用于同步地读取文件内容。当你使用相对路径来指定要读取的文件时,这个相对路径是相对于当前工作目录,而不是相对于正在执行的JavaScript文件本身。
假设你的项目结构如下:
project/ |-- src/ | |-- index.js |-- package.json 如果index.js文件尝试读取package.json,那么你应该使用./package.json,因为./表示当前目录,也就是src/目录。由于package.json文件位于src/的同级目录,也就是项目的根目录,所以使用./(当前目录)加上package.json文件名就可以找到文件。
如果你使用../package.json,这个路径表示的是上一级目录中的package.json文件。在上面的项目结构中,上一级目录就是项目的根目录,但使用../会导致Node.js在src/目录的上一级目录中查找package.json,而实际上package.json已经在src/的同级目录中了,所以这会导致找不到文件并报错。
简单来说,路径./package.json是指向当前目录(src/)下的package.json,这是不正确的,因为package.json不在src/目录下。而路径../package.json则试图向上一级目录查找package.json,这同样是不正确的,因为package.json实际上就在当前工作目录(项目根目录)下。
因此,正确的路径应该是./../package.json或者简单地./package.json(如果当前工作目录就是项目根目录的话)。但通常我们不需要指定./来表示当前目录,所以只需使用fs.readFileSync('package.json')就可以了,前提是当前工作目录是项目根目录。
如果你正在使用命令行或某种构建工具来运行你的Node.js脚本,确保你的当前工作目录(CWD)设置正确。你可以通过Node.js的process.cwd()方法来检查当前工作目录。如果CWD不是项目根目录,你可能需要调整你的工作目录,或者提供正确的相对路径来读取package.json文件。
问: 在nodejs中, src/index.js中读取和src平级的package.json文件, 为什么使用的路径是let json = fs.readFileSync('./package.json'), 使用let json = fs.readFileSync('../package.json')会报错, 但是在命令行中使用let json = fs.readFileSync('./package.json')也会报错, 怎么兼容本地使用和命令行使用
答: 在 Node.js 中,fs.readFileSync 方法用于同步读取文件内容。关于你提到的路径问题,它实际上与 Node.js 应用的执行上下文和当前工作目录(CWD)有关。
当你使用 let json = fs.readFileSync('./package.json'),这个路径是相对于当前工作目录的。如果你在命令行中直接运行 node src/index.js,那么当前工作目录通常是项目的根目录(即包含 src 和 package.json 的目录)。因此,'./package.json' 将正确指向 package.json 文件。
然而,如果你使用 let json = fs.readFileSync('../package.json'),这个路径会尝试向上查找一级目录中的 package.json 文件。在 src/index.js 的上下文中,上一级目录通常不包含 package.json,因此会报错。
关于你提到的“在命令行中使用 let json = fs.readFileSync('./package.json') 也会报错”,这听起来像是你可能以某种方式改变了当前工作目录,或者你可能在某种构建工具或 IDE 的上下文中运行代码,这些工具可能会改变当前工作目录。
为了兼容本地使用和命令行使用,你可以采取以下策略:
确保正确的当前工作目录:在命令行中运行你的 Node.js 脚本时,确保你的当前工作目录是项目的根目录。你可以使用 cd 命令来切换目录,或者在你的构建脚本或 IDE 配置中指定正确的目录。 使用 __dirname:在 Node.js 中,__dirname 是一个全局变量,它包含当前执行脚本所在的目录的路径。你可以使用它来构建相对于脚本文件的路径。例如: javascript const fs = require('fs'); const path = require('path');
let json = fs.readFileSync(path.join(__dirname, '..', 'package.json')); 这样,无论你的当前工作目录是什么,代码都会正确地找到 package.json 文件。 3. 检查你的构建工具或 IDE:如果你在使用如 Webpack、Gulp、VS Code 等工具,确保它们的配置没有改变当前工作目录或文件的执行方式。
总之,关键是确保你的路径是相对于正确的目录,并且你的当前工作目录是预期的目录。使用 __dirname 可以帮助你构建与脚本文件位置相关的路径,从而避免这类问题。
