工作中, 我们难免会遇到需要自己搭建脚手架的场景, 现成的脚手架有很多, 比如 create-react-app, vue-cli, 能覆盖大部分的需要。 但是也要很多不便利的地方, 我们需要自己定制一些配置, 又不想用 rewired or eject, 这个时候就需要自己手动搭建,但是从头搭建又很繁琐, 我自己搭建过几个项目, 每次需要新建的时候就很烦, 那有没有比较便利的方式呢?
有的。
今天这篇, 我就告诉你如何定制自己的 cli, 摆脱从0 搭建项目的困扰。
// 要发布的时候看到有个老哥好像发过一篇类似的文章了, 不过无所谓了, 我会从我的角度出发, 告诉大家如何一步一步定制自己的cli.
首先放一下我自己做的cli 工具包地址: https://www.npmjs.com/package...
如何使用:
``` sudo npm install create-my-project-cli -g mkdir temp && cd temp create-project project cd project yarn && yarn start ```
要达到这样的效果, 首先需要定制命令。
这个脚本就是你执行命令之后执行的逻辑,要执行的命令就定义在 package.json 中的 bin 字段里:
"bin": { "create-project": "index.js" },
这个 "create-project" 就是命令的名字。
这是package.json 的全部内容:
{ "name": "create-my-project-cli", "version": "1.0.4", "description": "A cli to create project quickly...", "main": "index.js", "scripts": { "lint": "eslint ./ --ext .js,.tsx,.ts", "lint:fix": "yarn lint --fix" }, "repository": { "type": "git", "url": "git+https://github.com/beMySun/create-my-project-cli.git" }, "bin": { "create-project": "index.js" }, "author": "KK", "license": "ISC", "bugs": { "url": "https://github.com/beMySun/create-my-project-cli/issues" }, "homepage": "https://github.com/beMySun/create-my-project-cli#readme", "dependencies": { "chalk": "^2.4.2", "commander": "^3.0.1", "download": "^7.1.0", "download-git-repo": "^2.0.0", "handlebars": "^4.2.1", "inquirer": "^7.0.0", "ora": "^4.0.0", "symbols": "^0.0.6" }, "devDependencies": { "babel-eslint": "^10.0.3", "eslint": "^6.4.0", "eslint-config-airbnb": "^18.0.1", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.14.3" } }
执行 create-project 命令之后, 就开始执行这段脚本, 本质上就是下载你定义好的项目模版到你本地。
下面就看该怎么实现这段逻辑, 算了, 不绕弯子了, 逻辑也不复杂, 直接贴代码吧:
#!/usr/bin/env node const fs = require('fs'); const program = require('commander'); const chalk = require('chalk'); const download = require('download-git-repo'); const inquirer = require('inquirer'); const ora = require('ora'); const symbols = require('log-symbols'); const handlebars = require('handlebars'); program .version(require('./package').version, '-v, --version') .command('<name>') .action(name => { if (!fs.existsSync(name)) { inquirer .prompt([ { name: 'templateType', message: 'which template type you need to create?', type: 'list', choices: ['react', 'rollup'] }, { name: 'description', message: 'please enter a description:' }, { name: 'author', message: 'please enter a author:' } ]) .then(answers => { const spinner = ora('downloading template...'); spinner.start(); const downloadPath = `direct:https://github.com/beMySun/${answers.templateType}-project-template.git#master`; download(downloadPath, name, { clone: true }, err => { if (err) { spinner.fail(); console.error( symbols.error, chalk.red(`${err}download template fail,please check your network connection and try again`) ); process.exit(1); } spinner.succeed(); const meta = { name, description: answers.description, author: answers.author }; const fileName = `${name}/package.json`; const content = fs.readFileSync(fileName).toString(); const result = handlebars.compile(content)(meta); fs.writeFileSync(fileName, result); }); }); } else { console.error(symbols.error, chalk.red('project has existed !!!')); } }) .on('--help', () => { console.log('Examples: '); }); program.parse(process.argv);
这里我提供了两个模版, 一个是react , 一个rollup, 不同的选择会输出不同的模版。
这两套模版都是首先定义好的, 会根据你的选择来确定下载哪一个。
源代码分别在:
https://github.com/beMySun/re... https://github.com/beMySun/ro...上面命令都是基础命令, 没什么好解释的, 如果哪里不清楚, 可以参考这位老哥的:
https://segmentfault.com/a/11...
他对这几个命令都有解释, 我就不赘述了。
定制一套自己cli, 能在日后需要的时候帮你节省很多时间, 你也可以不断的完善自己的cli, 让你的这个工具更强更好用。
文中我提供的react 模版包含了最常用的功能和优化, 有兴趣可以下载下来把玩一下。
谢谢。
下面是我的公众号: 前端e进阶
有新内容会第一时间更新在这里, 希望大家多多关注, 观看最新内容。
楼主写完博客一般都会往不同的平台上发, 手动搬运很烦, 费时费力, 这几天刚好看到出了一个新的工具可以解决这个问题:
https://openwrite.cn/
在这里编辑完文章之后, 可以一键发布到你定义的所有平台, 很方便, 大家有空可以看看。