npmと組み合わせてフロントエンドの足場を作る方法
3575 ワード
背景需要:日常开発の中で、プロジェクトがますます多くなるにつれて、再利用できるコードが多くなって、基本的なテンプレートを必要としてプロジェクトを初期化して、コードを自分のgitlabあるいはgithubの上に置いて、毎回また住所を探し当てて再びcloneしなければならなくて、とても面倒な期待の结果:XXX init.1行のコマンド解決ステップ:1、npmアカウントを申請し、https://www.npmjs.com/2npmプロジェクトpackageを書きます.json:
init.js
index.js
template.json:
1、npm login、ユーザー名、パスワード2、packageを変更する必要があります.json里version 3、npm publish 4、行きますhttps://www.npmjs.com/成功したかどうか見てみよう
関連説明:1、package.jsonでbinの位置を定義する2、indexでbinコマンドで実行を指定するコードを定義する3、initでshellを実行しgitでコードテンプレートを取りに行く
インストールと初期化:1、npm install windssr-g 2、windssr init 3、使用するテンプレートの選択、react、angular、vue
あなたに役に立つと思ったら、応援してね
{
"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 ,
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"}}}
1、npm login、ユーザー名、パスワード2、packageを変更する必要があります.json里version 3、npm publish 4、行きますhttps://www.npmjs.com/成功したかどうか見てみよう
関連説明:1、package.jsonでbinの位置を定義する2、indexでbinコマンドで実行を指定するコードを定義する3、initでshellを実行しgitでコードテンプレートを取りに行く
インストールと初期化:1、npm install windssr-g 2、windssr init 3、使用するテンプレートの選択、react、angular、vue
あなたに役に立つと思ったら、応援してね