Fis-command-init NPM

脚手架使用文档

介绍

如果你使用的是FIS，如果你感觉有一些东西可以做成规范实行起来，如果你有一些公用的模板或者组件的框架，那么就使用脚手架吧。方便快捷简单的搞定上面提到的这些问题。

使用方法

基本用法

  Usage: init <command> [options]

  Commands:

    module                 create a module
    widget                 create a widget

  Options:

    -h, --help                 output usage information
    -s, --scaffold <scaffold>
    -d, --dir <name>           create to dir
    --with-plugin              if create a module, whether include `plugin`
    --repos <url>              repository
    --verbose                  output verbose help
    --list [query]             list component from the repos

如上，脚手架支持创建一个模块（module）和widget（widget），其使用方法是；

新建一个模块

$ fis init module -d  common --with-plugin // common只是一个文件夹，可以是任何目录, --with-plugin意思是是否包含fis提供的smarty插件（fis-plus）
or
$ fis init module -d no-common // no-common只是一个文件夹，可以是任何目录

新建一个widget

$ fis init widget -d header

安装模块中使用到的fis插件

如果你的项目用了未在FIS中默认依赖的插件，比如sass，比如某某某；当一个新人拿到这样一个模块时，需要安装这些插件，但如果没有文档说明这些，TA最多看到release时的一个报错，然后不知所措；脚手架支持这样一个功能，自动安装这些插件。

在模块目录下执行；

$ fis init

下载其他组件

eg,

下载modjs

$ fis init modjs

如果想看看还能下载那些包；

$ fis init --list

高级用法

这节主要说一下脚手架的定制，脚手架默认附带一份模板和插件，后面会具体说明模板和插件。

模板

模板就是已经被创建好的module和widget；里面体现了公用的编码规范，和一些可替换的全局变量；这块很重要，是整个脚手架的核心。这个模板里面可以说明：

js组件如何导出函数
js组件如何使用，使用规范是什么
注释如何写
css组件如何写
fis-conf.js公用的配置
其他

有了模板，还需要有一些不一样的地方，就比如注释里面的作者、时间；还有fis-conf.js里面的namespace等。这种修改怎么办，脚手架提供一种方法。当制作模板的时候使用{{- namespace -}}这种方式后，再进行创建的时候需要使用者输入namespace的值。

插件

插件是用来进行一些目录调整的、文件名替换、下载模板等；

详细步骤

制作模板
- module模板
- widget模板
- 全局变量
发布模板
制作插件
发布插件

制作模板

#module模板

假设module中包含

fis-conf.js // fis配置文件
page/layout.tpl // layout.tpl
page/index.tpl // 页面模板
plugin/* // 插件
test/page/index.php // index页面测试数据

widget/header.tpl // widget tpl模板
widget/header.css // widget css文件
widget/header.js // widget js文件

那就创建这些文件，并完善；

$ tree iknow-scaffold-module
iknow-scaffold-module
    ├── fis-conf.js
    ├── page
    │   ├── index.tpl
    │   └── layout.tpl
    ├── plugin
    └── widget
        └── header
            ├── header.css
            ├── header.js
            └── header.tpl

widget模板

widget模板中包含

widget.tpl
widget.js
widget.css

#全局变量

比如 fis-conf.js

fis.config.set('namespace', {{-namespace ?-}});

以上说明了以下模板的制作过程，更详细请安装已经设定好的模板作为参考

$ lights install pc-scaffold-module

发布模板

FIS提供了包组件管理平台lights，你可以方便的把包发布到lights上；

$ cd iknow-scaffold-module
$ lights init //要求安装lights
...
$ lights publish

done.

脚手架内核提供了从lights下载包的方法；

/**
 * options.exclude [RegExp]需要排除的文件
 * options.include [RegExp]需要的文件
 * dist 目标目录
 */
fis.scaffold.downlaod('组件名', dist, options, callback);

下载完成以后，需要呼出交互界面替换全局变量的接口；

/**
 * dir 下载组件存放的文件夹
 */
fis.scaffold.prompt(dir);

还提供了一个mv接口，用来做文件或文件夹移动的；

fis.scaffold.mv(from, to, include, exclude);

其他接口；

还可以使用fis.util里面的所有方法；

$ node
> fis = require('fis');
> fis.util
{ [Function]
  is: [Function],
  map: [Function],
  pad: [Function],
  merge: [Function],
  clone: [Function],
  escapeReg: [Function],
  escapeShellCmd: [Function],
  escapeShellArg: [Function],
  stringQuote: [Function],
  getMimeType: [Function],
  exists: [Function],
  fs:
   { Stats: [Function],
     exists: [Function],
     existsSync: [Function],
     readFile: [Function],
     readFileSync: [Function],
     close: [Function],
     closeSync: [Function],
     open: [Function],
     openSync: [Function],
     read: [Function],
     readSync: [Function],
     write: [Function],
     writeSync: [Function],
     rename: [Function],
     renameSync: [Function],
     truncate: [Function],
     truncateSync: [Function],
     ftruncate: [Function],
     ftruncateSync: [Function],
     rmdir: [Function],
     rmdirSync: [Function],
     fdatasync: [Function],
     fdatasyncSync: [Function],
     fsync: [Function],
     fsyncSync: [Function],
     mkdir: [Function],
     mkdirSync: [Function],
     readdir: [Function],
     readdirSync: [Function],
     fstat: [Function],
     lstat: [Function],
     stat: [Function],
     fstatSync: [Function],
     lstatSync: [Function],
     statSync: [Function],
     readlink: [Function],
     readlinkSync: [Function],
     symlink: [Function],
     symlinkSync: [Function],
     link: [Function],
     linkSync: [Function],
     unlink: [Function],
     unlinkSync: [Function],
     fchmod: [Function],
     fchmodSync: [Function],
     lchmod: [Function],
     lchmodSync: [Function],
     chmod: [Function],
     chmodSync: [Function],
     lchown: [Function],
     lchownSync: [Function],
     fchown: [Function],
     fchownSync: [Function],
     chown: [Function],
     chownSync: [Function],
     _toUnixTimestamp: [Function: toUnixTimestamp],
     utimes: [Function],
     utimesSync: [Function],
     futimes: [Function],
     futimesSync: [Function],
     writeFile: [Function],
     writeFileSync: [Function],
     appendFile: [Function],
     appendFileSync: [Function],
     watch: [Function],
     watchFile: [Function],
     unwatchFile: [Function],
     realpathSync: [Function: realpathSync],
     realpath: [Function: realpath],
     createReadStream: [Function],
     ReadStream: { [Function: ReadStream] super_: [Object] },
     FileReadStream: { [Function: ReadStream] super_: [Object] },
     createWriteStream: [Function],
     WriteStream: { [Function: WriteStream] super_: [Object] },
     FileWriteStream: { [Function: WriteStream] super_: [Object] },
     SyncWriteStream: { [Function: SyncWriteStream] super_: [Object] } },
  realpath: [Function],
  realpathSafe: [Function],
  isAbsolute: [Function],
  isFile: [Function],
  isDir: [Function],
  mtime: [Function],
  touch: [Function],
  isWin: [Function],
  isTextFile: [Function],
  isImageFile: [Function],
  md5: [Function],
  base64: [Function],
  mkdir: [Function],
  toEncoding: [Function],
  isUtf8: [Function],
  readBuffer: [Function],
  read: [Function],
  write: [Function],
  filter: [Function],
  find: [Function],
  del: [Function],
  copy: [Function],
  ext: [Function],
  query: [Function],
  pathinfo: [Function],
  camelcase: [Function],
  pipe: [Function],
  parseUrl: [Function],
  download: [Function],
  upload: [Function],
  install: [Function],
  readJSON: [Function],
  glob: [Function],
  nohup: [Function],
  normalize: [Circular] }

制作插件

插件需要放到npm上，插件命名规范fis-scaffold-<插件名>。具体可参考fis-scaffold-pc

插件接口:

/**
 * options
 * options.dir  安装到dir目录下
 * options.withPlugin 是否带插件
 */
module.exports = function (options) {
  ...
  //必须导出widget和module两个接口
  return {
    widget: function () {....}
    module: function () {....}
  };
}

插件完成后发布npm；

那么这个插件如何使用呢；假设自定义了一个插件fis-scaffold-iknow.

那么使用的时候

# 使用-s选择某个脚手架
$ fis init module -s iknow -d common
$ fis init widget -s iknow -d footer

发布插件

$ npm publish

fis scaffold fis-plus

colors fis-repo-client fis-scaffold-pc prompt

@everything-registry/sub-chunk-1674 yliyun3

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

11 years ago