成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何結合npm做一個前端腳手架

pf_miles / 3613人閱讀

摘要:背景需求在日常開發(fā)中,隨著項目越來越多,能重復利用的代碼就越多,急需一套基本的模板來初始化項目,把代碼放到自己的或上,每次又得找到地址重新一下,很麻煩期望的結果。。。

背景需求:在日常開發(fā)中,隨著項目越來越多,能重復利用的代碼就越多,急需一套基本的模板來初始化項目,把代碼放到自己的gitlab或github上,每次又得找到地址重新clone一下,很麻煩
期望的結果:XXX init 。。。一行命令解決
步驟:
1、申請一個npm賬號,https://www.npmjs.com/
2、寫一個npm項目
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"}}}

寫好了需要發(fā)布一下嘍:
1、npm login,填寫用戶名,密碼
2、修改package.json里version
3、npm publish
4、去https://www.npmjs.com/ 上看看成功沒有

相關說明:
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

如果覺的對你有用的話,支持一下哈

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/106054.html

相關文章

  • 前端核心工具:yarn、npm、cnpm三者如何優(yōu)雅的在一起使用 ?

    摘要:由于文件中版本號的特點,下面三個版本號在安裝的時候代表不同的含義。安裝版本統(tǒng)一為了防止拉取到不同的版本,有一個鎖定文件記錄了被確切安裝上的模塊的版本號。 showImg(https://segmentfault.com/img/bVbs8Rg?w=1920&h=1080); 一位用不好包管理器的前端,是一個入門級前端,一個用不好webpack的前端,是一個初級前端 三個包管理器是可以一...

    sihai 評論0 收藏0
  • 前端核心工具:yarn、npm、cnpm三者如何優(yōu)雅的在一起使用 ?

    摘要:由于文件中版本號的特點,下面三個版本號在安裝的時候代表不同的含義。安裝版本統(tǒng)一為了防止拉取到不同的版本,有一個鎖定文件記錄了被確切安裝上的模塊的版本號。 showImg(https://segmentfault.com/img/bVbs8Rg?w=1920&h=1080); 一位用不好包管理器的前端,是一個入門級前端,一個用不好webpack的前端,是一個初級前端 三個包管理器是可以一...

    plus2047 評論0 收藏0
  • 前端核心工具:yarn、npm、cnpm三者如何優(yōu)雅的在一起使用 ?

    摘要:由于文件中版本號的特點,下面三個版本號在安裝的時候代表不同的含義。安裝版本統(tǒng)一為了防止拉取到不同的版本,有一個鎖定文件記錄了被確切安裝上的模塊的版本號。 showImg(https://segmentfault.com/img/bVbs8Rg?w=1920&h=1080); 一位用不好包管理器的前端,是一個入門級前端,一個用不好webpack的前端,是一個初級前端 三個包管理器是可以一...

    HitenDev 評論0 收藏0

發(fā)表評論

0條評論

pf_miles

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<