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

annil

v1.9.0

Published

微信小程序(原生开发)插件

Downloads

175

Readme

简介

annil(安奈儿)是微信小程序原生开发插件。她会给您更佳的开发体验,大大提高代码质量和开发效率。

特点

代码片段

  • 组件构建API功能更强大

    新的组件构建API加入了computedwatchstore(基于mobx的全局响应式数据)`等功能,使开发更便捷。

  • 复杂组件解决方案

    新的组件构建方案(根组件 + 子组件(可选)),组件逻辑与wxml标签一一对应。解决书写复杂组件时不同组件代码耦合的问题。

  • 组件类型概念

    新的组件构建API(DefineComponent)返回的类型叫组件类型,好比传统组件(UI)库为每个组件书写的使用文档,在做为子组件构建新组件(页面)时,子组件API(SubComponent)需要使用者传入组件类型,这样在书写配置字段时会得到完美的类型提示和错误检测。这样实现了在一个页面中所有子组件之间的类型耦合,无论组件嵌套多少层,无论哪层组件数据类型发生改变,所有相关组件类型都会得到感知。当您增改、重构代码时,只要无类型报错(tsc --noEmit --watch)就不会有运行时报错的心智负担。

  • 高兼容性

    annil提供的API都是原生API的语法糖,不具有强制性和侵入性,可渐进的重构代码。

  • 类型修补

    官方类型(miniprogram-api-typings)更新可能不够及时,annil提供了新的类型(补全官方类型)方便开发,这些类型都采用ES模块化,不会污染全局类型。

  • 完美适配第三方组件(UI)库

    第三方组件库一般都是以文档的形式对组件说明,annil提供了泛型CreateComponentType,可根据组件文档快速书写组件类型,使第三方组件完美融入annil组件模型,也可以自己书写临时组件类型用于项目。内置的原生组件类型库(Wm)和第三方组件库(Vant)也会持续维护。

  • vscode插件 annil

    当使用ts开发时,可安装vscode插件,会自动检测组件中.wxml.json错误,并可一键修复,不必在书写wxml中自定义组件的属性和json文件的导入地址了。详情见 插件市场

安装

  1. 依赖安装
  • 必装

    npm i annil
  • 可选

    # 使用ts开发 hry-types为annil依赖的类型库。
    npm  --save-dev typescript hry-types miniprogram-api-typings
    # 使用状态管理 
    npm i mobx
  1. 构建npm

    若使用mobx(当前mobx为6.x.x),在构建npm前需要手动更改node_modules/mobx/dist/index.js文件 避免构建时出现 ReferenceError: process is not defined 错误。

    // 更改前
    "use strict";
    
    if (process.env.NODE_ENV === "production") {
      module.exports = require("./mobx.cjs.production.min.js"); // 仅保留这行即可
    } else {
      module.exports = require("./mobx.cjs.development.js");
    }
    // 更改后
    "use strict";
    module.exports = require("./mobx.cjs.production.min.js");

    开发者工具左上部工具栏——工具——构建npm

  2. tsconfig.json推荐配置(使用ts开发时)

{
  "compilerOptions": {
    "target": "ES2022",
    "moduleResolution": "node",
    "skipLibCheck": true, // 跳过声明文件的类型检查(.d.ts)。
    "esModuleInterop": true, // 默认false. 兼容非ES模块引用的写法(如 import type mobx from 'mobx'等).
    "strict": true, // 启用严格模式
    "exactOptionalPropertyTypes": true, // 带有?标志的属性类型不在包含undefined类型
    "noEmit": true, // 编译时不生成文件。
    "strictFunctionTypes": false, // 忽略函数参数逆变引起的问题
    "types": [
      "hry-types",
      "mobx",
      "miniprogram-api-typings"
    ]
  },
  "include": [
    "**/*.ts"
  ]
}

使用文档

更新日志

CHANGELOG

讨论群

加微信 missannil 请注明(annil)