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

@quancheng/h666-cli

v2.0.0-rc.30

Published

cli

Downloads

8

Readme

简介

h666是以h5为主的hybird跨端解决方案。具体包括:组件库、cli工具、项目模版、CI/CD、错误搜集、性能监控。从开发到上线,一站式配齐。


Demo

【微信小程序】

todo

【头条小程序】

todo

【其它小程序】

todo

快速开始

1. 全局安装cli工具
yarn global add @ruiyun/h666-cli
2. 用cli初始化一个新的项目
h666 create

按照提示输入项目名称,等待下载模版并初始化,完成后会看到提示。

3. 安装依赖并启动开发

在项目目录下

yarn & yarn start

之后访问http://{本机ip}:3000就可以看到h5页面。

小程序预览见下面【小程序】

App预览见面【HybirdApp】

修改src/pages/index/app.js,保存后可以看到页面已经自动更新。

4. 增加一个页面

在项目根目录下

yarn add-page

会依次提示你输入页面名(英文页面名)和页面默认标题(会显示在标题栏),之后会帮你创建好h5页面和小程序页面。 同时会在package.json中增加pages属性记下页面名和标题的对应关系。

5. 路由跳转

参考首页跳转到list页的路由用法,被WithRouter装饰器装饰后,会在props上多出一个$router属性,$router.push跳转到下一个页面,$router.pop跳回上一个页面,$router.params是路由参数。具体API可以参考路由组件文档。


目录结构约定

h666-project
  │
  ├──── src
  │      ├── assets(资源文件)
  │      │     └──logo.png
  │      │
  │      ├── libs(工具库)
  │      │     └──md5.js
  │      │
  │      ├── components(公共组件) 
  │      │     └──Cell(组件名文件夹)
  │      │          ├──index.js(组件代码)
  │      │          └──index.css(组件样式)
  |      |          
  │      ├── constans(常量配置)
  │      │     ├──apis.js(接口常量)
  │      │     └──other.js(其它常量)
  │      │
  │      ├── pages(页面)
  │      │     └──index(首页)
  │      │          ├──app.js
  │      │          ├──app.css
  │      │          └──entry.js(页面级自定义entry,特殊情况才需要)
  │      │ 
  │      ├── services(服务-包装后端接口)
  │      │     └──UserServcie.js(首字母大写)
  │      │        
  │      ├── sw.js(自定义serviceworker,特殊情况才需要)
  │      │
  │      ├── entry.js(自定义entry,特殊情况才需要)
  │      │ 
  │      └── template.html(自定义模版,特殊情况才需要)
  │
  ├──── wechat(微信小程序模版代码,一般不需要改动)
  │
  ├──── .gitlab-ci.yml(gitlab环境下配合多阶段构建的CI脚本)
  │
  ├──── Dockerfile(多阶段构建脚本)
  │
  ├──── upload.js(非docker环境下的上传脚本)
  │
  └──── package.json

小程序

启动h666项目后,用微信开发者工具打开wechat目录就预览小程序内的效果。注意本地开发需要勾选不校验安全域名。真机预览需要开启调试。提交小程序审核时需要修改wechat/app.js内host变量为h5的线上域名。并在微信后台配置业务域名和安全域名。


HybirdApp(基于RN)

文档待完善


ServiceWorker

默认只在安卓平台启用ServiceWorker,因为IOS的应用内WkWebview不支持sw,Safari虽然支持但是会导致bfcache失效。如果你想修改默认设置,可以修改package.json中的ServiceWorker字段的正则。


错误搜集Sentry

参考demo在packge.json中配置Sentry字段。


分析优化打包体积

在项目根目录下运行

yarn build:pro:analyse

会生成一个profile.json文件。去这里上传这个JSON文件,分析各个页面的组成,提取公共依赖进common.js


装饰器

为了优雅实现依赖注入,已经默认支持es7+的装饰器用法。用API形式调用的组件都是装饰器实现。比如路由的WithRouter,对话框组件的WithDialog等。


构建目标全局变量

console.log($BUILD_TARGET$)
// 本地开发(yarn start) ==> local
// 测试环境(yarn build:dev) ==> dev
// 生产环境(yarn build:pro) ==> production

可以根据不同值来走不同api的endpoint

修改响应式基础

默认是按照移动端750px的设计的,如果要修改,可以在package.json里加一个属性p2rBase,值改为设计稿尺寸,比如1080。

修改默认页面模版

可以在项目根目录下放一个自定义的template.html

提取公文js库进common.js

package.json中有一个commonChunks属性,里面记录了要进common.js的包名。

自定义entry

方式一:

在/src/下建立一个entry.js,写入

export default function onEntry () {
  // 下面的代码每个页面初始化时都会执行
  console.log('hhh')
}

这个onEntry函数每个页面初始化都会执行。

方式二:

在 src/pages/{页面名}/ 下建立entry.js,写入

export default function onEntry () {
  // 下面的代码只有该页面初始化时会执行
  console.log('dddd')
}

这个onEntry函数只有这个页面初始化时才会执行。 方式二的entry会覆盖方式一。

自定义兼容性

默认的js和css兼容性是“last 2 versions”。如果不满足你的需要,可以在package.json中加入

{
  "browsers": [
    "android >= 4.4",
    "ios >= 8"
  ]
}

可以参考browserl.ist来设置你想要的兼容性。

自定义后编译的包

默认只会编译src下面的js文件。但是有些npm包是需要编译后再使用的(个人推荐这种方式),比如@ruiyun/preact-m-router,@ruiyun/preact-layout-suite等。可以在package.json中加入

{
  "include": [
    "@ruiyun",
    "p-to-r",
    "h5-indicator"
  ],
}

来自定义加入需要后编译的包名。

自定义全局常量

可在在package.json中加入全局常量对象,此配置将被webpack.DefinePlugin接收。请注意属性值需要是一个合法的JSON字符串。

{
  "globalConstants": {
    "APP_VERSION": "'1.0.0'"
  }
}