npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

xiaduokun-react-cli

v1.0.1

Published

自定义react脚手架工具

Downloads

7

Readme

编写脚手架

  1. 自定义的命令 而不是node去执行我们的脚本
  2. -V --help create 命令行交互工具
  3. 去下载模板 isTS 下载ts版本 不要就下载js版本

模板仓库地址

https://gitee.com/chinafaker/vue-template.git

https://gitee.com/xiaduokun/my-react-cli.git

-js -ts

步骤

  1. 新建/src/index.js, /src/utils.js

  2. 执行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文件,而不需要用户进行任何输入。

  3. 使用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模块,它可以直接下载模板仓库的完整代码。

  4. 在index.js写入 #!/usr/bin/env node 解释: 告诉操作系统我执行自定义命令的时候, 你帮我用node执行 这个文件

  5. 在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”就是我们自定义的命令名称, 可以随便写

  6. 执行npm link 命令,将脚手架连接到全局环境 解释: npm link 命令, 会创建一个软连接,将我们脚手架的index.js文件 软连接挂载到全局环境, 也就是说 我们在任意目录下都可以执行我们自定义的命令了

  7. 控制台执行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 可以帮助你构建与脚本文件位置相关的路径,从而避免这类问题。