摘要:背景需求在日常開發(fā)中,隨著項(xiàng)目越來越多,能重復(fù)利用的代碼就越多,急需一套基本的模板來初始化項(xiàng)目,把代碼放到自己的或上,每次又得找到地址重新一下,很麻煩期望的結(jié)果。。。
背景需求:在日常開發(fā)中,隨著項(xiàng)目越來越多,能重復(fù)利用的代碼就越多,急需一套基本的模板來初始化項(xiàng)目,把代碼放到自己的gitlab或github上,每次又得找到地址重新clone一下,很麻煩
期望的結(jié)果:XXX init 。。。一行命令解決
步驟:
1、申請(qǐng)一個(gè)npm賬號(hào),https://www.npmjs.com/
2、寫一個(gè)npm項(xiàng)目
package.json:
{ "name": "windssr", "version": "1.0.8", "description": "a tool service for react-ssr", "main": "index.js", "bin": { "windssr": "index.js" }, "author": "windseek", "license": "ISC", "dependencies": { "chalk": "^2.4.2", "co": "^4.6.0", "co-prompt": "^1.0.0", "commander": "^2.20.0" }, "scripts": { "test": "test" }, "repository": { "type": "git", "url": "git+https://github.com/Windseek/react-ssr-cli.git" }, "keywords": [ "react", "react-ssr", "wind-ssr", "react-ssr-cli" ], "bugs": { "url": "https://github.com/Windseek/react-ssr-cli/issues" }, "homepage": "https://github.com/Windseek/react-ssr-cli#readme" }
init.js
"use strict" const exec = require("child_process").exec const co = require("co") const prompt = require("co-prompt") const config = require("./template.json") const chalk = require("chalk") module.exports = () => { co(function *() { // 處理用戶輸入 let tplName = yield prompt("Template name (you can input one like react, vue, angular): ") let projectName = yield prompt("Project name: ") let gitUrl,branch; console.log(config.tpl); if (!config.tpl[tplName]) { console.log(chalk.red(" × Template does not support!")) process.exit() } gitUrl = config.tpl[tplName].url branch = config.tpl[tplName].branch // git命令,遠(yuǎn)程拉取項(xiàng)目并自定義項(xiàng)目名 let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}` exec(cmdStr, (error, stdout, stderr) => { if (error) { console.log(error) process.exit() } console.log(chalk.green(" √ Generation completed!")) console.log(` cd ${projectName} && npm install `) process.exit() }) }) }
index.js
#!/usr/bin/env node --harmony "use strict" process.env.NODE_PATH = __dirname + "/../node_modules/" const program = require("commander") program .version(require("./package").version) program .usage("") program .command("init") .description("Generate a new project") .alias("i") .action(() => { require("./init.js")() }) program.parse(process.argv)
template.json:
{"tpl":{"react":{"url":"https://github.com/Windseek/reactssr.git","branch":"master"}}}
寫好了需要發(fā)布一下嘍:
1、npm login,填寫用戶名,密碼
2、修改package.json里version
3、npm publish
4、去https://www.npmjs.com/ 上看看成功沒有
相關(guān)說明:
1、package.json里定義bin的位置
2、index里定義bin命令指定執(zhí)行的代碼
3、init里執(zhí)行shell,去git上拿代碼模板
安裝和初始化:
1、npm install windssr -g
2、windssr init
3、選擇要使用的模板,react,angular和vue
如果覺的對(duì)你有用的話,支持一下哈
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/106054.html
摘要:由于文件中版本號(hào)的特點(diǎn),下面三個(gè)版本號(hào)在安裝的時(shí)候代表不同的含義。安裝版本統(tǒng)一為了防止拉取到不同的版本,有一個(gè)鎖定文件記錄了被確切安裝上的模塊的版本號(hào)。 showImg(https://segmentfault.com/img/bVbs8Rg?w=1920&h=1080); 一位用不好包管理器的前端,是一個(gè)入門級(jí)前端,一個(gè)用不好webpack的前端,是一個(gè)初級(jí)前端 三個(gè)包管理器是可以一...
摘要:由于文件中版本號(hào)的特點(diǎn),下面三個(gè)版本號(hào)在安裝的時(shí)候代表不同的含義。安裝版本統(tǒng)一為了防止拉取到不同的版本,有一個(gè)鎖定文件記錄了被確切安裝上的模塊的版本號(hào)。 showImg(https://segmentfault.com/img/bVbs8Rg?w=1920&h=1080); 一位用不好包管理器的前端,是一個(gè)入門級(jí)前端,一個(gè)用不好webpack的前端,是一個(gè)初級(jí)前端 三個(gè)包管理器是可以一...
摘要:由于文件中版本號(hào)的特點(diǎn),下面三個(gè)版本號(hào)在安裝的時(shí)候代表不同的含義。安裝版本統(tǒng)一為了防止拉取到不同的版本,有一個(gè)鎖定文件記錄了被確切安裝上的模塊的版本號(hào)。 showImg(https://segmentfault.com/img/bVbs8Rg?w=1920&h=1080); 一位用不好包管理器的前端,是一個(gè)入門級(jí)前端,一個(gè)用不好webpack的前端,是一個(gè)初級(jí)前端 三個(gè)包管理器是可以一...
閱讀 2436·2019-08-30 15:52
閱讀 2237·2019-08-30 12:51
閱讀 2833·2019-08-29 18:41
閱讀 2812·2019-08-29 17:04
閱讀 811·2019-08-29 15:11
閱讀 1720·2019-08-28 18:02
閱讀 3603·2019-08-26 10:22
閱讀 2510·2019-08-26 10:12