离线包发布 - AK

steamer-plugin-ak

AlloyKit平台生成离线包命令

NPM Version Travis Deps Coverage

Webpack 插件

如果是 steamer 系列的 webpack 脚手架，可使用 ak-webpack-plugin 插件。

安装

  1. npm i -g steamerjs
  3. npm i -g steamer-plugin-ak

使用

如果项目的生成环境的代码结构如下：

  1. -- dist
  2.     |
  3.     -- cdn
  4.     |    |
  5.     |    |-- css
  6.     |    |-- img
  7.     |    |-- js
  8.     |
  9.     -- webserver
  10.         |-- index.html
  11.         |-- detail.html
  12.         |-- comment.html

初始化：

  1. steamer ak -i
  3. 或
  5. steamer ak -init

它会弹出下面的一些问题：

Your zip file name, 意思是最终生成的离线包名称，默认值是 offline，当前文件夹位置以命令执行位置为基准。

Your source folder, 生成环境的代码源，上面的项目结构中是 dist，这也是默认值。

后面三个选项会一直循环出现，除非你输入空值，因为项目中可能有多个 cdn 对应多个静态资源。例如，你可能会用 //huayang.qq.com/h5/ 给你的 html 文件，而用 //s1.url.cn/h5/ 给你的其它静态资源。

  1. Your zip file name(e.g., offline): (offline)
  3. Your source folder(e.g., build, pub, dist): (dist)
  5. Whether to add webserver url for all resources: (No)
  7. Your resource folder(e.g., cdn, cdn/js, cdn/css, webserver):
  9. Your destination url(e.g.,//huayang.qq.com/h5/):
  11. Your destination folder(e.g., /, /, js, css):

这里是配置文件的范例 (.steamer/steamer-plugin-ak.js).

  1. module.exports = {
  2.     "plugin": "steamer-plugin-ak",
  3.     "config": {
  4.         // String, 最终生成的离线包名称，默认值是 `offline`，**当前文件夹位置以命令执行位置为基准**
  5.         "zipFileName": "dist/offline", 
  6.         // String, 生成环境的代码源，默认值 `dist`
  7.         "src": "dist",
  8.         // 压缩参数，详参 https://archiverjs.com
  9.         "zipConfig": {
  10.             zlib: { level: 9 },
  11.         },  
  12.         // 具体的文件目录及cdn映射,
  13.         "map": [
  14.             {
  15.                 "src": "webserver",
  16.                 "url": "//localhost:9000/"
  17.             },
  18.             {
  19.                 "src": "cdn",
  20.                 "url": "//localhost:8000/"
  21.             }
  22.         ],
  23.         // minimatch 配置，以下是默认的配置
  24.         "minimatchOpt": {
  25.             matchBase: true,
  26.             dot: true
  27.         },
  28.         // 下列回调方法，可以直接使用this.fs (fs-extra), this.success, this.info, this.warn, this.alert
  29.         // 在 拷贝文件到 offline 离线文件夹之前
  30.         beforeCopy: function() {
  32.         },
  33.         // 在 拷贝文件到 offline 离线文件夹之后
  34.         afterCopy: function() {
  36.         },
  37.         // 在压缩 offline 离线文件夹之前
  38.         beforeZip: function(offlineFiles) {
  39.             // offlineFiles 在离线包文件夹内的文件路径信息
  40.         },
  41.         // 在压缩 offline 离线文件夹之后
  42.         afterZip: function(zipFilePath) {
  43.             // zipFilePath 最终生成的离线zip包路径
  45.         }
  46.     }
  47. }

然而，有时候你会对 html 以外的静态资源再进行细分，使用不同的 cdn 域名，例如 //s1.url.cn/h5/ 给你的 js文件，用 //s2.url.cn/h5/ 给 css 文件， 然后用 //s3.url.cn/h5/ 给其它的文件。

Here is another example config.

  1. module.exports = {
  2.     "plugin": "steamer-plugin-ak",
  3.     "config": {
  4.         "zipFileName": "offline",
  5.         "src": "dist",
  6.         "map": [
  7.             {
  8.                 "src": "cdn/js",
  9.                 // String, 目标文件路径子文件夹，默认为空字符串
  10.                 "dest": "js",
  11.                 // Boolean， 默认 false，如果为 true， 则会将 cdn 的 url替换成与 isWebserver 为 true 的 cdn url
  12.                 "isSameOrigin": true, 
  13.                 "url": "s1.url.cn/huayang/"
  14.             },
  15.             {
  16.                 "src": "cdn/css",
  17.                 "dest": "css",
  18.                 "url": "s2.url.cn/huayang/"
  19.             },
  20.             {
  21.                 "src": "cdn/img",
  22.                 "dest": "img",
  23.                 "url": "s3.url.cn/huayang/"
  24.             },
  25.             {
  26.                 "src": "cdn/lib",
  27.                 "dest": "lib",
  28.                 "url": "s1.url.cn/huayang/"
  29.             },
  30.             {
  31.                 "src": "webserver",
  32.                 // Boolean， 默认为 false，如果为 true，则这将告诉插件这是 html 的主要 cdn url 
  33.                 "isWebserver": true,
  34.                 "url": "huayang.qq.com/huayang/activity/"
  35.             }
  36.         ]
  37.     }
  38. }

之所以要用 isSameOrigin 与 isWebserver，是有时候需要 html 文件和 js 文件的域名一致，例如有时候需要收集js的报错，让两者的 cdn 一致会更方便收集到具体的报错信息。

如果你想部份文件走离线包，部份走线上，你在生成离线包的时候，可以 exclude 部份文件。 exclude 参数，主要是 Globs 的写法，可以参考 minimatch 的配置。示例配置如下。对于一些比较长的路径，如 /a/b/c/d/1.png，可以尝试如 **/c/d/*.png 类似的匹配。

  1. module.exports = {
  2.     "plugin": "steamer-plugin-ak",
  3.     "config": {
  4.         "zipFileName": "dist/offline",
  5.         "src": "dist",
  6.         "map": [
  7.             {
  8.                 "src": "webserver",
  9.                 "dest": "",
  10.                 "url": "//huayang.qq.com/h5/"
  11.             },
  12.             {
  13.                 "src": "cdn",
  14.                 "dest": "",
  15.                 "url": "//s1.url.cn/h5/",
  16.                 "exclude": ['*.png', '*ell.jpg'],
  17.             }
  18.         ]
  19.     }
  20. }

下面的命令，会进行压缩，并生成 offline 文件夹，还有 offline.zip 文件。

  1. steamer ak -c
  3. or
  5. steamer ak -compress

测试

  1. // 安装eslint工具
  2. npm i -g eslint
  4. npm run test