前言
现在的前端开发基本使用 npm 包管理器来管理自己的项目,而且社区的开源项目也越来越多,这使得我们能更快的开发、更好的维护我们的项目。在这个过程中,我们可能会经常使用到各种各样的命令行工具,如 create-react-app、vue-cli、webpack 等等,但如果我们需要快速的搭建一个测试环境,比如快速起一个 local server,或者是需要使用一些极少使用的命令行工具,这时候,如果每次都要手写 script,那可真的是太麻烦了吧。本文就要介绍一个叫做 friday-cli 的 npm 包,它能够给我们的前端开发带来极大的便利。
什么是 friday-cli
friday-cli 是一个命令行工具(也就是 cli)库,它的初衷是能够让开发者更轻松地创建项目,快速的执行一些命令,而无需手动写一大堆命令。它是一款基于 node.js 的命令行工具,它的 github 地址是 https://github.com/rxliuli/friday-cli,下面我们来说说在实战中如何使用它。
安装
首先我们需要全局安装 friday-cli:
npm i friday-cli -g
创建一个新项目
假设我们现在需要创建一个 react 项目,那么我们只需在终端输入以下命令:
f init-react <project-name>
其中,<project-name>
为你的项目名称,如:
f init-react my-awesome-project
friday-cli 会在当前目录下创建一个叫做 my-awesome-project
的文件夹,并且在其中生成一个 react 项目的基础模板。
快速生成各种代码片段
在前端开发过程中,我们需要使用很多的代码片段,如 html、css、js、react 组件等等,而我们有时候可能会忘记模板或者语法,这时候我们就可以使用 friday-cli 给我们快速生成相应的代码片段。下面是一些常用命令:
生成一个 React 组件
如果我们需要快速生成一个 react 组件文件,则可使用:
f gen-cmp <MyComponents> -d src/components
其中,<MyComponents>
为你的组件名称,如:
f gen-cmp Button -d src/components
friday-cli 会自动在 src/components
目录下生成一个 Button.jsx 文件和 Button.css 文件,如下图:
生成 JavaScript 代码
如果我们需要快速生成一段JavaScript代码,则使用:
f gen-js <fileName> -d src/javascript
其中,<fileName>
为你的文件名称,如:
f gen-js test -d src/javascript
friday-cli 会自动在 src/javascript
目录下生成一个 test.js 文件,代码如下:
console.log('Hello World!');
这种能够帮助开发者快速生成代码的功能非常实用,我们在开发过程中应该多多使用。
小结
当然,friday-cli 能够做的事情并不止于此,它还支持新建 git 仓库、cookbook 命令、zip 命令等等。但在开发过程中,以上命令已经能够满足我们大部分工作需求。friday-cli 给我们的开发带来了极大的便利,同时也让我们可以多花点时间去关注业务代码、UI 设计等方面,让开发更加高效也更加愉悦。
更加详细的使用资料请查询 Friday-CLI使用文档。
希望大家都可以了解这个工具,同时也希望大家能够多多参与开源项目的贡献,让前端开发更简单、更愉悦。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382264d