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

hub-baai-lib

v2.1.6

Published

社区公用插件

Downloads

14

Readme

hub-baai-lib

社区论文评论区封装为插件

目录结构

发布到npm的插件通常遵循一定的项目目录结构,以确保代码的组织和可维护性。以下是一个典型的npm插件项目目录结构示例:

my-npm-plugin/
├── src/
│   ├── index.js        # 插件的主要源代码文件
│   └── ...             # 其他源代码文件和目录
├── lib/                # 编译后的代码,用于发布到npm(如果使用了编译步骤)
├── test/               # 测试代码
│   ├── unit/           # 单元测试
│   └── integration/    # 集成测试
├── examples/           # 插件使用示例
├── docs/               # 文档
├── .gitignore          # Git忽略文件
├── .npmignore          # npm忽略文件(如果有需要忽略的文件或目录)
├── package.json        # npm包描述文件
├── README.md           # 项目README,通常包含安装、使用说明等
├── LICENSE             # 许可证文件
└── ...                 # 其他配置文件,如.babelrc, .eslintrc, etc.

这里是每个部分的详细说明:

  • src/: 包含插件的源代码。这是你开发插件时主要工作的地方。
  • lib/: 如果你的插件需要编译(例如,使用Babel将ES6代码转换为ES5),编译后的代码通常放在这个目录。这个目录的内容是实际发布到npm的代码。
  • test/: 包含所有测试代码,可能会进一步分为unit/(单元测试)和integration/(集成测试)。
  • examples/: 包含一些示例项目或代码,展示如何使用这个插件。
  • docs/: 包含项目文档,如API参考、开发者指南等。
  • .gitignore: 指定Git版本控制要忽略的文件和目录。
  • .npmignore: 指定发布到npm时要忽略的文件和目录。如果没有这个文件,.gitignore会被npm用作默认的忽略文件。
  • package.json: 描述你的插件和其依赖的文件。这是npm使用的主要配置文件。
  • README.md: 项目的README文件,通常在npm的包页面上显示。它应该包含关于插件的描述、安装指南、使用示例和任何其他重要信息。
  • LICENSE: 包含项目许可证的文本。这对于开源项目来说是非常重要的。

请注意,这只是一个示例结构,具体的项目结构可能会根据你的具体需求和偏好而有所不同。重要的是保持代码的组织性和清晰的文档,以便其他开发者可以轻松地使用和贡献你的插件。

示例预览

# 安装依赖
npm install
# 启动
npm run dev

npm 打包发布

切换到项目根目录下,执行以下命令

# 打包
npm run package

修改package.json 文件

"version": "1.0.0",
"description": "插件描述",
"main": "dist/hub-baai-lib.umd.min.js", // 指定main属性,作为入口文件,dist目录下的 .umd.min.js文件
"keywords": ["标签1", "标签2"],
"author": "作者",
"license": "ISC",
"private": false,  // 私有属性要改成 false

发布到 npm 库 https://www.npmjs.com/

npm publish

注意⚠️:更新版本发布,记得修改 package.json 中的 version 版本号

其他项目使用

使用方法跟element-ui类似,在main.js中引入,全局注册

import HubBaaiLib from 'hub-baai-lib';
import 'hub-baai-lib/dist/hub-baai-lib.css';
Vue.use(HubBaaiLib);

页面中使用

评论回复列表

<discuss ref="ref_discuss" :id="post_id" :data="discussList"
      avatar_url="https://hub-avatar.baai.ac.cn/sso-user/82882.png" :isLogin="true" @go2Login="go2Login"
      @getPostId="getPostId" @handleSubmit="handleSubmit" />

参数:
    id:主id
    data:评论列表数据
    avatar_url:登录人头像地址
    isLogin:是否登录,登录后才能评论

事件
    go2Login:登录后才能评论,未登录执行登录操作
    getPostId:当id为空时,执行获取id的操作
    handleSubmit:发布评论事件。发布成功后,执行this.$refs.ref_discuss.updateList(res)隐藏回复框,并刷新数据

评论列表

<discuss-list :list="list" v-if="list.length" :replyDisabled="replyDisabled"  :isLogin="isLogin" @toggleAttribute="toggleAttribute"/>
参数:
    list:评论列表数据
    replyDiabled:默认false,true可以禁用回复功能
    isLogin:是否登录,登录后才能评论
事件
    toggleAttribute:评论列表二级展开收起切换,敏感内容展示隐藏切换