steamer-plugin-kit

starter kit 管理命令

内置

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

安装

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

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

设置 NODE_PATH

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

常见问题 - NODE_PATH设置

更新

npm i -g steamer-plugin-kit@latest

// 或者
steamer update

添加脚手架

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

基于脚手架初始化项目

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

更新脚手架

steamer kit --update --global
 
? Which starterkit do you wanna update:  (Use arrow keys)
❯ all starterkits
  steamer-react - alloyteam react starterkit
  steamer-vue - alloyteam vue starterkit
  steamer-simple - alloyteam frameworkless starterkit

更新项目使用的脚手架

cd project
steamer kit --update

查看可用脚手架

steamer kit  --list
// 或
steamer kit -l
 
You can use following starterkits:
* steamer-react
    - ver: 3.0.8
    - des: alloyteam react starterkit
    - url: https://github.com/steamerjs/steamer-react.git
* steamer-vue
    - ver: 3.0.5
    - des: alloyteam vue starterkit
    - url: https://github.com/steamerjs/steamer-vue.git
* steamer-simple
    - ver: 3.0.3
    - des: alloyteam frameworkless starterkit
    - url: https://github.com/steamerjs/steamer-simple.git

脚手架数据

// 添加脚手架后，数据会存放在 $HOME/.steamer/starterkits/ 下面，脚手架的相关信息也会存放在 starterkit.js 中
// 示例信息如下：
kits = {
  list: {
      'steamer-react': {
          latestVersion: '3.0.8',
          currentVersion: '3.0.8',
          description: '',
          versions: [
            '3.0.8',
            '3.0.5'
          ],
          url: ''
      }
  },
  timestamp: ''
};

基于模板生成页面

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

脚手架生命周期

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

const path = require("path");
const fs = require("fs");
 
module.exports = {
    /**
     * some other codes here
     */
 
    // 初始化脚手架时，在拷贝文件发生前
    beforeInstallCopy: function (answers, folderPath) {
        console.log('====beforeInstallCopy====');
    },
 
    // 初始化脚手架时，在拷贝文件发生后
    afterInstallCopy: function (answers, folderPath) {
        console.log('====afterInstallCopy====');
    },
 
    // 初始化脚手架时，在安装依赖发生前
    beforeInstallDep: function (answers, folderPath) {
        console.log('====afterInstallDep====');
    },
 
    // 初始化脚手架时，在安装依赖发生后
    afterInstallDep: function (answers, folderPath) {
        console.log('====afterInstallDep====');
    },
 
    // 更新本地项目脚手架时，在拷贝文件发生前
    beforeUpdateCopy: function (answers, folderPath) {
        console.log('====beforeUpdateCopy====');
    },
 
    // 更新本地项目脚手架时，在拷贝文件发生后
    afterUpdateCopy: function (answers, folderPath) {
        console.log('====afterUpdateCopy====');
    },
 
    // 更新本地项目脚手架时，在更新依赖发生前
    beforeUpdateDep: function (answers, folderPath) {
        console.log('====beforeUpdateDep====');
    },
 
    // 更新本地项目脚手架时，在更新依赖发生后
    afterUpdateDep: function (answers, folderPath) {
        console.log('====afterUpdateDep====');
    },
 
};
 

Starter Kit 的例子

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

steamer develop -k [kit name]

官方 Starter Kit:

• react starter kit: steamer-react
• vue starter kit: steamer-vue
• 无框架 starter kit: steamer-simple
• react 组件开发 starter kit: steamer-react-component
• vue 组件开发 starter kit: steamer-vue-component
• 无框架 组件开发 starter kit: steamer-simple-component
• 小工具开发 starter kit: steamer-logic-component

开发脚手架

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

cd [starterkit path]
 
steamer kit --develop
// or
steamer kit -d
 
// 如果想用别名，则用
steamer kit --develop [alias name]
// or
steamer kit -d [alias name]