npmと組み合わせてフロントエンドの足場を作る方法


背景需要:日常开発の中で、プロジェクトがますます多くなるにつれて、再利用できるコードが多くなって、基本的なテンプレートを必要としてプロジェクトを初期化して、コードを自分のgitlabあるいはgithubの上に置いて、毎回また住所を探し当てて再びcloneしなければならなくて、とても面倒な期待の结果:XXX init.1行のコマンド解決ステップ:1、npmアカウントを申請し、https://www.npmjs.com/2npmプロジェクト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 , 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
あなたに役に立つと思ったら、応援してね