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

native-zip

v1.0.4

Published

app内H5应用本地化打包工具,支持增量打包,全量打包

Downloads

37

Readme

说明

  • 基于svn export命令抓取配置的依赖文件

打包方法

  • 初始状态下,读取配置文件,读取svn路径信息,该包所有的依赖文件通过svn export命令导入本地的uid命名的目录
  • 解析shtml文件,解析其中的include命令,生成新的html文件,这里要注意只能使用include命令,不可用ssi的其他诸如获取时间的命令
  • 替换seajs的文件路径
  • 压缩html里的脚本,替换相对路径和绝对路径
  • 生成该应用所有的依赖map文件,读取文件的md5值保存
  • 此时通过比对文件的MD5值,来判断是打全量包还是增量包
    • 打全量包,按照配置文件的uid参数命名xxxx.zip
    • 打增量包,按照配置文件的uid参数命名xxxx_patch.zip
  • 执行zip压缩包命令,放到./dist/uid/目录下
  • 生成配置文件uid.xml
  • 根据命令参数判断是否删除svn export下来的文件目录
  • 生成changelog日志文件,打包时间,打包文件等信息
  • shtml文件里所引用的静态资源均存放在统一目录下,以相对路径引用,所以前面有一个步骤是把/static这样子的路径修改为../../static/的步骤
  • 打包后的zip目录下,就只有shtml文件,参考下面的目录结构,fragment和template目录都没有了

配置文件xml

<?xml version="1.0" encoding="utf-8"?>
<package>
	<!--业务包UID-->
	<uid>1000001</uid>
	
	<!--业务包名称-->
	<name>打包的业务名称</name>
	
	<!--业务包介绍-->
	<descriptor>打包的业务描述</descriptor>
	
	<!--是否需要登录-->
	<login>true</login>
	
	<!--包版本号-->
	<version>1.0.6</version>
	
	<!--主包地址-->
	<zip>http://example.com/1000001.zip</zip>
	
	<!--更新包地址-->
	<patch>http://example.com/1000001_patch.zip</patch>
	
	<!--业务包入口-->
	<entry>html/product/index.shtml</entry>
</package>

目录结构

|- rootDirectory/
    |- html /
        |- product /
            |- fragment     存放页面片
            |- template     存放模板文件,被shtml文件引用
            |- index.shtml
            |- detail.shtml
            |- ...
    |- static /
        |- js
        |- style
    |- common-sinclude /        公共被shtml文件引用的文件列表,最好是以.tpl结尾
        |- report.tpl
        |- env.tpl
        |- seajs.tpl

配置项说明

  • 参见目录下的configzip.js文件
module.exports = {
    mapFile: "zip-manifest.json",					// 保存文件hash的文件名
    idcPath: "http://example.com/static/h5zip/",	// 正式环境生成到xml文件里的包路径,即zip和patch字段的前缀
    testPath: "http://example.com/static/h5zip/",	// 测试环境
    svnAccount: {
        username: "username",						// svn export命令时使用的svn账户信息
        password: "password"							
    },
    baina: {
        uid: 20000,									// 产品ID,自定义,后面打包的文件名,配置文件等使用
        entry: "html/product/index.shtml",			// 产品访问入口文件
        name: "产品描述文字",
        login: true,								// 是否需要登录
        versionFormat: "yyyymmddHHMM",				// 生成版本号的时间戳格式
        svnPath: "svn://svn.example.com/projects/xxxxxx/project/",		// svn路径前缀
        staticPath: "/static",						// 静态资源存放目录,注意/
        relativePath: true,							// 是否使用相对路径访问静态资源
        absolutePath: "https://cdn.example.com",	// 使用url绝对路径访问静态资源,这里注意和staticPath配合,最终生成出来的路径是https://cdn.example.com/static/xxxx
        fullLinkProtocol: "http",					// 替换页面里引用的静态资源,针对//cdn.example.com/static/xxxx这种形式的写法,加上协议前缀,防止本地化后无法访问
        seajsTpl: '<script type="text/javascript" src="../../static/js/seajs-zepto/sea-zepto.js"></script>\n' +		// seajs全量替换代码
                '\t<script type="text/javascript">' +
                'var basePath = "../../static/js/";' +
                'seajs.config({base: basePath});' +
                '</script> ',
        dependencies: {								// 产品依赖文件
            copyPath: {								// 需要被export到本地的目录列表,js html style是固定的,代码里需要用到,这个是为svn export使用的
                style: "static/style/product/",
                html: "html/product/",
                js: ["static/js/product/", "static/js/seajs-zepto/"],
                other: "common-sinclude/"
            },
            files: {								// 需要被打包的文件名glob匹配列表,即最终打包到zip包里的文件,这里有一个地方需要注意
                style: "**/*",						// 对应的类型的文件需要一致,比如copyPath下的style是字符串,则files下的style也需要是字符串,是数组也都需要是数组,并且长度需要一致,也就是一个path匹配一个file
                html: "*.shtml",
                js: ["*.js", "*.js"]
            }

        }
    }
}

打包命令说明

  • 命令native zip(暂时只提供一个命令)
  • native zip project -option

  Usage: zip [options] [projectName]

  打包指定名称的应用,命令格式:native zip [projectName] -a
  如果不指定-a,则程序自动判断打包类型,指定则打全量包

  Options:

    -h, --help            output usage information
    -a, --all             强制打全量包
    -d, --deleteFile      打包完成后删除下载的文件
    -l, --local           是否直接使用本地文件(如果有)
    -t, --test            打测试环境的本地包
    -n, --number [value]  指定打包的版本号

日志

  • 每一次打包都会生成log记录,保存在changelog.log文件里