ysf-cli

CLI for react-ppfish-boilerplate .

Getting Started

快速安装并新建一个项目。

# Install
$ npm install ysf-cli -g

# 在当前目录下创建一个叫myproject的项目
$ ysf new myproject

# 在当前项目下创建一个页面模板，文件夹名称叫page
$ ysf g page

# Start project
$ cd myproject
$ npm start

支持的命令

ysf new

在当前目录创建一个名叫 <projectName>的项目。

示例

$ ysf new blog
$ ysf new blog --repo=https://内网地址.com:808080/nsfi/nsfi-next-gen-template.git # 自定义样板工程的仓库地址

ysf generate (short-cut alias: "g")

在当前目录生成一个页面。

示例

$ ysf g home

生成的文件树如下

.
├── source
    ├── entries
        └── app
        	└── app.js
    ├── pages
        └── App
    		├── components
    			└── index.js
    		├── reducers
	    		├── initialState.js
	    		├── reducer.js
    			└── rootReducer.js
    		├── actions
    		├── actionTypes
    		├── App.js
    		├── App.less
    		├── index.js
    		├── routes.js
    		└── view.js
	└── views
	    └── App
	    	└── app.ftl

ysf update (short-cut alias: "u")

升级当前项目的样板工程配置至新版本。样板工程项目里有一个文件夹叫u，里面包含了从样板工程上一个版本升级到当前版本要做的操作。cli 工具会去读取样板工程里的 ./u/update.json 文件，然后执行里面声明的更新操作。比如

{
  "backup": [
    "source/appRoutes.js",
    "webpack.config.dev.js",
    "项目里的文件将会复制一份来备份"
  ],
  "override": ["将会覆盖的文件，从样板工程覆盖项目里的对应的文件"],
  "rename": {
    "项目里的文件路径": "新的文件路径"
  },
  "dependencies": {
    "依赖名称": "修改至的版本",
    "react": "~16.5.4"
  },
  "dependenciesRoRemove": ["希望删除的依赖"],
  "devDependencies": {
    "依赖名称": "修改至的版本",
    "eslint": "^5.6.1"
  },
  "devDependenciesRoRemove": ["希望删除的模块"],
  "delete": ["将会被删除的文件或者目录，支持glob"],
  "script": {
    "glob表达式_从项目根目录匹配到文件交给处理脚本": "./u/处理脚本.js",
    "其实脚本可以做任何事情的": "./u/可以不管匹配到的文件.js"
  },
  "hooks": {
    "beforeUpdate": "./u/beforeUpdate.js",
    "afterUpdate": "./u/afterUpdate.js"
  }
}

script 会将匹配到的内容转变为命令行参数传递给处理脚本，脚本可以通过 process.argv 参数访问到匹配的文件。 除此以外，脚本还可以通过环境变量获取。

• PROJECT_DIR # 当前执行 ysf update 命令的路径，当前要升级的项目的根路径
• CLI_DIR # ysf 工具所在的路径
• CACHE_DIR # 新版本样板工程的根目录。

script 里的脚本要处理三种情况：

1. 没有匹配到文件
2. 匹配到的文件没有经过处理
3. 匹配到的文件已经处理过

样板工程的版本号采用x.y.z的格式，先比较 x 的大小,再比较 y,最后比较 z.在使用新的样板工程版本的项目里，必须有一个.boilerplate.json 文件，这个文件里包含当前使用的样板工程版本。版本升级只能一个版本一个版本的升级。

示例

$ ysf update 0.0.1
$ ysf update 0.0.2 --repo=https://内网地址.com:808080/nsfi/nsfi-next-gen-template.git
$ ysf update --list   # 列出当前可用的版本

当使用--repo 参数时，将会覆盖.boilerplate.json里配置的 repo 地址。

.boilerplate.json 配置项

• version 当前样板工程版本
• boilerplateRepo 自定义样板工程的 repo 地址。Repo 优先级 cli 参数 > 项目自定义 repo > 默认 repo 地址
• (仅带上--dev 参数)cacheFolder 用于调试update.json,设置虚拟的样板工程仓库缓存目录。将会忽略 repo 地址，跳过版本检查，直接执行update.json里的操作

如何调试 update.json？

样板工程新版本的目录被称作CACHE_DIR,我们只要设定新版本的目录以后，我们就能调试升级样板工程的操作了。

方案 1

在项目根目录下创建一个.cache 文件夹，然后在 .cache/u/ 文件夹里配置你的 update.json 。 在项目根目录下执行ysf update --dev，就可以测试了。

这种方式相当于将将新版本的样板工程位置设置为了当前项目下的.cache文件夹。

For example:

$ cd yourProject
$ mkdir -p .cache/u       # you can treat the .cache folder as CACHE_DIR
$ echo '{"script":{"./*":"./u/debugInYourProject.js"}}' > .cache/u/update.json
$ echo 'console.log(process.argv)' > .cache/u/debugInYourProject.js
$ ysf update --dev --verbose     # see magic ~

如果你的项目里已经用了 .cache 这个文件夹的名称了，你还可以在项目根目录下的 .boilerplate.json里配置cacheFolder ，修改为其他文件夹的名称。

{
  "cacheFolder": "__anotherName__"
}

执行 ysf update --dev 将会从你的执行 __anotherName/u/update.json里声明的一些更新操作。

方案 2

将样板工程 clone 到本地，与项目根目录平级（不是克隆到项目根目录里，而是克隆到项目根目录的外面），然后配置你的.boilerplate.json如下：

{
  "cacheFolder": "../react-ppfish-boilerplate"
}

在项目根目录下执行 ysf update --dev 将会读取外层样板工程目录里的update.json

License

MIT