脚手架部署与更新 - Kit

steamer-plugin-kit

starter kit 管理命令

NPM Version Travis AppVeyor Deps Coverage

内置

steamer-plugin-kit 已经默认作为 steamerjs 的内置插件，全局安装 steamerjs 后即可使用。如果你额外安装 steamer-plugin-kit，则会优先使用这个额外安装的包。

安装

以下命令全局安装 steamerjs 或 steamer-plugin-kit，使用时如遇到问题，可先参见文档[常见问题]，可能是没设置好 NODE_PATH

  1. // 必须
  2. npm i -g steamerjs
  4. // v2.0 已经内置到 steamerjs，因此可不安装
  5. npm i -g steamer-plugin-kit

设置 NODE_PATH

由于 steamerjs 的命令或脚手架都需要全局安装，尽管steamerjs会尝试兼容，但在某些使用场景下会仍然找到不全局安装的位置，因此推荐设置环境变量 NODE_PATH。

常见问题 - NODE_PATH设置

更新

  1. npm i -g steamer-plugin-kit@latest
  3. // 或者
  4. steamer update

添加脚手架

  1. // 添加最新版本
  2. steamer kit --add https://github.com/steamerjs/steamer-react.git
  4. // 添加指定tag版本
  5. steamer kit --add https://github.com/steamerjs/steamer-react.git --tag v3.0.7

基于脚手架初始化项目

  1. // 运行命令，并进行选择
  2. steamer kit
  4. ? Which starterkit do you wanna install:  (Use arrow keys)
  5. ❯ steamer-react - alloyteam react starterkit
  6.   steamer-vue - alloyteam vue starterkit
  7.   steamer-simple - alloyteam frameworkless starterkit
  8. ? Which version do you need:  (Use arrow keys)
  9. ❯ 3.0.8
  10.   3.0.5
  11. ? Which folder is your project in:  (./)

更新脚手架

  1. steamer kit --update --global
  3. ? Which starterkit do you wanna update:  (Use arrow keys)
  4. ❯ all starterkits
  5.   steamer-react - alloyteam react starterkit
  6.   steamer-vue - alloyteam vue starterkit
  7.   steamer-simple - alloyteam frameworkless starterkit

更新项目使用的脚手架

  1. cd project
  2. steamer kit --update

查看可用脚手架

  1. steamer kit  --list
  2. // 或
  3. steamer kit -l
  5. You can use following starterkits:
  6. * steamer-react
  7.     - ver: 3.0.8
  8.     - des: alloyteam react starterkit
  9.     - url: https://github.com/steamerjs/steamer-react.git
  10. * steamer-vue
  11.     - ver: 3.0.5
  12.     - des: alloyteam vue starterkit
  13.     - url: https://github.com/steamerjs/steamer-vue.git
  14. * steamer-simple
  15.     - ver: 3.0.3
  16.     - des: alloyteam frameworkless starterkit
  17.     - url: https://github.com/steamerjs/steamer-simple.git

脚手架数据

  1. // 添加脚手架后，数据会存放在 $HOME/.steamer/starterkits/ 下面，脚手架的相关信息也会存放在 starterkit.js 中
  2. // 示例信息如下：
  3. kits = {
  4.   list: {
  5.       'steamer-react': {
  6.           latestVersion: '3.0.8',
  7.           currentVersion: '3.0.8',
  8.           description: '',
  9.           versions: [
  10.             '3.0.8',
  11.             '3.0.5'
  12.           ],
  13.           url: ''
  14.       }
  15.   },
  16.   timestamp: ''
  17. };

基于模板生成页面

  1. steamer kit --template
  2. // or
  3. steamer kit -t
  5. // 初次使用时做好配置，然后选择模板
  6. ? type the template source folder: ./tools/template
  7. ? type your template destination folder:  ./src/page
  8. ? type your npm command(npm|tnpm|cnpm etc):  npm
  9. ? which template do you like:  (Use arrow keys)
  10. ❯ preact-list
  11.   react-simple-mobx
  12.   react-simple-redux
  13.   react-spa-mobx
  14.   react-spa-redux
  15.   react-typescript

脚手架生命周期

3.0.0 版本后，新增脚手架生命周期，例如，如果脚手架叫做 steamer-example，则在脚手架相关配置文件 .steamer/steamer-example.js 中可以写如下生命周期：

  1. const path = require("path");
  2. const fs = require("fs");
  4. module.exports = {
  5.     /**
  6.      * some other codes here
  7.      */
  9.     // 初始化脚手架时，在拷贝文件发生前
  10.     beforeInstallCopy: function (answers, folderPath) {
  11.         console.log('====beforeInstallCopy====');
  12.     },
  14.     // 初始化脚手架时，在拷贝文件发生后
  15.     afterInstallCopy: function (answers, folderPath) {
  16.         console.log('====afterInstallCopy====');
  17.     },
  19.     // 初始化脚手架时，在安装依赖发生前
  20.     beforeInstallDep: function (answers, folderPath) {
  21.         console.log('====afterInstallDep====');
  22.     },
  24.     // 初始化脚手架时，在安装依赖发生后
  25.     afterInstallDep: function (answers, folderPath) {
  26.         console.log('====afterInstallDep====');
  27.     },
  29.     // 更新本地项目脚手架时，在拷贝文件发生前
  30.     beforeUpdateCopy: function (answers, folderPath) {
  31.         console.log('====beforeUpdateCopy====');
  32.     },
  34.     // 更新本地项目脚手架时，在拷贝文件发生后
  35.     afterUpdateCopy: function (answers, folderPath) {
  36.         console.log('====afterUpdateCopy====');
  37.     },
  39.     // 更新本地项目脚手架时，在更新依赖发生前
  40.     beforeUpdateDep: function (answers, folderPath) {
  41.         console.log('====beforeUpdateDep====');
  42.     },
  44.     // 更新本地项目脚手架时，在更新依赖发生后
  45.     afterUpdateDep: function (answers, folderPath) {
  46.         console.log('====afterUpdateDep====');
  47.     },
  49. };

Starter Kit 的例子

符合 steamer 规范的 Starter Kit，可以参考 steamer-example，并仿照规范，进行接入。如何想开发，可以使用下面命令初始化：

  1. steamer develop -k [kit name]

官方 Starter Kit:

开发脚手架

在使用 steamer develop -k [kit name] 初始脚手架并开发了一定程序之外，若要在本地测试，可使用以下命令：

  1. cd [starterkit path]
  3. steamer kit --develop
  4. // or
  5. steamer kit -d
  7. // 如果想用别名，则用
  8. steamer kit --develop [alias name]
  9. // or
  10. steamer kit -d [alias name]