脚手架开发

steamer-example

steamer starterkit 例子

开发

  1. npm i -g steamerjs
  3. steamer develop --kit [starterkit name xxx]
  4. // 或
  5. steamer develop -k [starterkit name xxx]
  6. // 命令运行后，会下载 [steamer-example](https://github.com/steamerjs/steamer-example)
  8. // 到 starterkit 开发目录下使用此命令，能使 starterkit 建立了一份全局的软链接
  9. cd steamer-xxx
  10. npm link
  12. // 当你测试完后，请取消这个全局的软链接。
  13. npm unlink steamer-xxx

目录规范

  1. .steamer -- steamer 配置
  2. dist -- 生产环境代码
  3. |
  4. src -- 源代码
  5. |
  6. config -- 项目配置，用户主要关注配置，steamer不更新
  7. |------project.js -- 项目配置
  8. |------steamer.config.js -- 可由steamer生成，包括 webserver, cdn, port 等
  9. |      |
  10. |      |
  11. tools  -- 构建工具，steamer帮助更新
  12. |      |
  13. |——————script.js -- 生产环境或开发环境执行命令
  14. |——————webpack.base.js -- webpack 基础配置
  15. |
  16. package.json

命令规范

  1. // 开发环境
  2. npm start
  4. // 生产环境
  5. npm run dist
  7. // 测试
  8. npm test
  10. // 规范代码命令
  11. npm run lint
  13. // 模板生成
  14. steamer kit -t

如何开发一个 steamer 规范的 starterkit

  • 新建 .steamer 目录下的配置

你需要新建一个配置文件于 .steamer 目录下。如果你的 starterkit 名称是 steamer-example，那么配置的文件名必须是 steamer-example.js。

配置的例子如下：

  1. module.exports = {
  2.     files: [
  3.         "src",
  4.         "tools",
  5.         "config",
  6.         "README.md",
  7.         ".eslintrc.js",
  8.         ".eslintignore",
  9.         ".stylelintrc.js",
  10.         ".stylelintignore",
  11.         "postcss.config.js",
  12.         ".gitignore",
  13.         ".babelrc"
  14.     ],
  15.     options: [
  16.         {
  17.             type: 'input',
  18.             name: 'webserver',
  19.             message: 'html url(//localhost:9000/)',
  20.             default: "//localhost:9000/",
  21.         },
  22.         {
  23.             type: 'input',
  24.             name: 'cdn',
  25.             message: 'common cdn url(//localhost:8000/)',
  26.             default: "//localhost:8000/",
  27.         },
  28.         {
  29.             type: 'input',
  30.             name: 'port',
  31.             message: 'development server port(9000)',
  32.             default: '9000',
  33.         }
  34.     ]
  35. };

  1. files

    • 此配置是任何会被拷贝到开发目录下的文件夹或者文件。

  2. options

    • 我们使用 inquirer 去读取此配置，了解更多，可以去阅读 inquirer的文档。
  • 在 package.json 中指定一个主要文件，此文件是上面添加的 .steamer 目录下的配置，因为 steamer-plugin-kit 的命令运行时候需要读取它。
  1. "main": "./.steamer/steamer-example.js",

同时，在 keywords 中添加关键词 “steamer starterkit”。

  1. "keywords": [
  2.     "steamer starterkit",
  3.     // other keywords
  4. ]

Util 库

开发脚手架时，常常需要一些 Util 函数，帮助你快速开发，Steamer 提供以下 Util 库：