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 🙏

© 2024 – Pkg Stats / Ryan Hefner

mgc-script

v1.0.1

Published

常用脚本工具

Downloads

2

Readme

MGC-SCRIPT插件分享

工程结构

支持node版本14.19.0 +

package.json中bin字段的作用

许多软件包都具有一个或多个要安装到 PATH 中的可执行文件。 bin 字段是命令名到本地文件名的映射。在安装时,npm 会将文件符号链接到 prefix/bin 以进行全局安装或./node_modules/.bin/本地安装。 当我们使用 npm 或者 yarn 命令安装包时,如果该包的 package.json 文件有 bin 字段,就会在 node_modules 文件夹下面的 .bin 目录中复制了 bin 字段链接的执行文件。我们在调用执行文件时,可以不带路径,直接使用命令名来执行相对应的执行文件。 例如vue-cli中

集成组件介绍

Command

编写代码来描述你的命令行界面。 Commander 负责将参数解析为选项和命令参数,为问题显示使用错误,并实现一个有帮助的系统。

Commander 是严格的,并且会针对无法识别的选项显示错误。 两种最常用的选项类型是布尔选项,和从参数中获取值的选项。

示例

const { Command } = require('commander');
const program = new Command();

program
  .name('string-util')
  .description('CLI to some JavaScript string utilities')
  .version('0.8.0');

program.command('split')
  .description('Split a string into substrings and display as an array')
  .argument('<string>', 'string to split')
  .option('--first', 'display just the first substring')
  .option('-s, --separator <char>', 'separator character', ',')
  .action((str, options) => {
    const limit = options.first ? 1 : undefined;
    console.log(str.split(options.separator, limit));
  });

program.parse();
inquirer

Inquirer.js试图为NodeJs做一个可嵌入式的美观的命令行界面,它是非常容易去处理以下几种事情的:

  • 提供错误回调
  • 询问操作者问题
  • 获取并解析用户输入
  • 检测用户回答是否合法
  • 管理多层级的提示

inquire.js问题对象实体:

  • type:问题的类型,可以是 input、confirm、list、rawlist、expand、checkbox、password 或 editor。
  • name:问题的名称,用于存储用户的回答。
  • message:问题的描述,用于显示给用户。
  • default:问题的默认值,可选。
  • choices:问题的选项,只有当 type 是 list、rawlist、expand 或 checkbox 时才需要,可以是一个数组或一个函数。
  • validate:问题的验证函数,用于检查用户的回答是否合法,可选。
  • filter:问题的过滤函数,用于对用户的回答进行处理,可选。
  • transformer:问题的转换函数,用于对用户的回答进行格式化,可选。
  • when:问题的条件函数,用于判断是否显示该问题,可选。
  • pageSize:问题的分页大小,只有当 type 是 list、rawlist 或 expand 时才有效,可选。

示例

const questions = [{
        type: 'input',
        name: 'name',
        message: 'What is your name?',
        default: 'Anonymous'
    },
    {
        type: 'confirm',
        name: 'confirm',
        message: 'Do you like inquirer?',
        default: true
    },
    {
        type: 'list',
        name: 'language',
        message: 'What is your favorite programming language?',
        choices: ['JavaScript', 'Python', 'Java', 'C#', 'C++'],
        default: 'JavaScript'
    },
    {
        type: 'checkbox',
        name: 'skills',
        message: 'What skills do you have?',
        choices: [
            { name: 'HTML', checked: true },
            { name: 'CSS', checked: true },
            { name: 'JavaScript', checked: true },
            { name: 'Node.js' },
            { name: 'React' },
            { name: 'Vue' }
        ]
    },
    {
        type: 'password',
        name: 'password',
        message: 'Enter a password',
        mask: '*'
    }
];
ejs

类比handlebars、artTemplate、jade这些模板引擎等,ejs也是一个javascript模板引擎,这里就不比较它与其他模板引擎的性能做对比了,ejs语法过于朴实,如果你会写html和简单的javascript,或者你用jsx写过react,那么ejs对你来讲将轻而易举。只需简单的两步:

将%标签包裹的js语法写在html里 将html后缀的文件后缀名替换成ejs

模版示例

import React, { useEffect, useState } from 'react'

export const <%= fileName %> = (props) => {
    
    return(
        <div>
            
        </div>
    );
};

解析示例

 const outputTemplateStr = await ejs.renderFile(path.resolve(dirname, `../../template/${type}.ejs`), {fileName})
 const err = await fs.outputFile(path.resolve(cwd, `${outputPath}/${fileName}.${judgeSuffix(type)}`), outputTemplateStr)

使用说明

mgc init 工程初始化

脚本支持

  • vue-mobile vue h5工程
  • vue-admin vue管理后台
  • vue3-mobile vue3 h5工程
  • vue3-admin vue3管理后台
  • mini-program 小程序
  • react react工程

以上六类工程初始化

示例

初始化成功

mgc cli 创建模版文件

支持创建模版类型

  • react
  • uni
  • vue
  • vue3-ts
  • vue3

创建模版示例

创建结果

mgc chart

该命令主要用于生产utils工具类及chartgpt内容,主要实现为集成百度文言一心接口实现智能会话功能

使用示例

通过chat接口返回匹配script文本,如果匹配成功则会将文案插入用户输入的文件中(文件不存在则会自动创建)。如果匹配失败,则会在控制台直接输出查询结果