建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)怎樣搭建一個nodejs腳手架，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在陽城等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計,營銷型網(wǎng)站,外貿(mào)網(wǎng)站制作,陽城網(wǎng)站建設(shè)費用合理。
1 前言
1.1
像我們熟悉的 vue-cli，taro-cli 等腳手架，只需要輸入簡單的命令 taro init project ，即可快速幫我們生成一個初始項目。在日常開發(fā)中，有一個腳手架工具可以用來提高工作效率。
1.2 為什么需要腳手架
減少重復(fù)性的工作，從零創(chuàng)建一個項目和文件。
根據(jù)交互動態(tài)生成項目結(jié)構(gòu)和配置文件等。
多人協(xié)作更為方便，不需要把文件傳來傳去。
1.3 怎樣來搭建呢？
腳手架是怎么樣進(jìn)行構(gòu)建的呢，我是借助了 taro-cli 的思路。
1.4 本文的目標(biāo)讀者
1 想要學(xué)習(xí)更多和了解更多的人
2 對技術(shù)充滿熱情
2 搭建前準(zhǔn)備
2.1 第三方工具
commander.js ，可以自動的解析命令和參數(shù)，用于處理用戶輸入的命令。
download-git-repo ，下載并提取 git 倉庫，用于下載項目模板。
Inquirer.js ，通用的命令行用戶界面集合，用于和用戶進(jìn)行交互。
handlebars.js ，模板引擎，將用戶提交的信息動態(tài)填充到文件中。
ora ，下載過程久的話，可以用于顯示下載中的動畫效果。
chalk ，可以給終端的字體加上顏色。
log-symbols ，可以在終端上顯示出 √ 或 × 等的圖標(biāo)
2.2 上手
2.2.1 新建一個文件夾，然后npm init初始化
npm 不單單用來管理你的應(yīng)用和網(wǎng)頁的依賴，你還能用它來封裝和分發(fā)新的 shell 命令。
$ mkdir lq-cli $ npm init
這時在我們的 lq-cli 項目中有 package.json 文件，然后需要創(chuàng)建一個 JS 文件包含我們的腳本就取名 index.js 吧。 package.json 內(nèi)容如下
{
"name": "lq-shell",
"version": "1.0.0",
"description": "腳手架搭建",
"main": "index.js",
"bin": {
"lq": "./index.js"
},
"scripts": {
"test": "test"
},
"keywords": [
"cli"
],
"author": "prune",
"license": "ISC"
}index.js內(nèi)容如下
#!/usr/bin/env node
console.log('Hello, cli!');到這一步就可以簡單運行一下這個命令
npm link lq
npm link 命令可以將一個任意位置的 npm 包鏈接到全局執(zhí)行環(huán)境，從而在任意位置使用命令行都可以直接運行該 npm 包。 控制臺會輸出 Hello, cli!
2.2.2 捕獲init之類的命令
前面的一個小節(jié)，可以跑一個命令行了，但是我們看到的 taro-cli 中還有一些命令，init初始化項目之類。這個時候 commander 就需要利用起來了。 運行下面的這個命令將會把最新版的 commander 加入 package.json
npm install --save commander
引入 commander 我們將 index.js 做如下修改
#!/usr/bin/env node
console.log('Hello, cli!')
const program = require('commander')
program
.version(require('./package').version, '-v, --version')
.command('init ')
.action((name) => {
console.log(name)
})
program.parse(process.argv) 可以通過 lq -v 來查看版本號 通過 lq init name 的操作，action里面會打印出name
2.2.3 對console的美工
我們看到taro init 命令里面會有一些顏色標(biāo)識，就是因為引入了chalk這個包，同樣和 commander 一樣
npm install --save chalk
console.log(chalk.green('init創(chuàng)建'))
這樣會輸出一樣綠色的
2.2.4 模板下載
download-git-repo 支持從 Github下載倉庫，詳細(xì)了解可以參考官方文檔。
npm install --save download-git-repo
download() 第一個參數(shù)就是倉庫地址,詳細(xì)了解可以看官方文檔
2.2.5 命令行的交互
命令行交互功能可以在用戶執(zhí)行 init 命令后，向用戶提出問題，接收用戶的輸入并作出相應(yīng)的處理。用 inquirer.js 來實現(xiàn)。
npm install --save inquirer
index.js文件如下
#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init創(chuàng)建'))
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
program
.version(require('./package').version, '-v, --version')
.command('init ')
.action((name) => {
console.log(name)
inquirer.prompt([
{
type: 'input',
name: 'author',
message: '請輸入你的名字'
}
]).then((answers) => {
console.log(answers.author)
download('',
name, {clone: true}, (err) => {
console.log(err ? 'Error' : 'Success')
})
})
})
program.parse(process.argv) 2.2.6 ora進(jìn)度顯示
npm install --save ora
相關(guān)命令可以如下
const ora = require('ora')
// 開始下載
const proce = ora('正在下載模板...')
proce.start()
// 下載失敗調(diào)用
proce.fail()
// 下載成功調(diào)用
proce.succeed()2.2.6 log-symbols 在信息前面加上 √ 或 × 等的圖標(biāo)
npm install --save log-symbols
相關(guān)命令可以如下
const chalk = require('chalk')
const symbols = require('log-symbols')
console.log(symbols.success, chalk.green('SUCCESS'))
console.log(symbols.error, chalk.red('FAIL'))2.2.7 完整文件如下
#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init創(chuàng)建'))
const fs = require('fs')
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const ora = require('ora')
const symbols = require('log-symbols')
program
.version(require('./package').version, '-v, --version')
.command('init ')
.action((name) => {
console.log(name)
inquirer.prompt([
{
type: 'input',
name: 'author',
message: '請輸入你的名字'
}
]).then((answers) => {
console.log(answers.author)
const lqProcess = ora('正在創(chuàng)建...')
lqProcess.start()
download('github:/Mr-Prune/learn/MongoDB-koa',
name, {clone: true}, (err) => {
if (err) {
lqProcess.fail()
console.log(symbols.error, chalk.red(err))
} else {
lqProcess.succeed()
const fileName = `${name}/package.json`
const meta = {
name,
author: answers.author
}
if(fs.existsSync(fileName)){
const content = fs.readFileSync(fileName).toString();
const result = handlebars.compile(content)(meta);
fs.writeFileSync(fileName, result);
}
console.log(symbols.success, chalk.green('創(chuàng)建成gong'))
}
})
})
})
program.parse(process.argv) 關(guān)于“怎樣搭建一個nodejs腳手架”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
新聞標(biāo)題：怎樣搭建一個nodejs腳手架
鏈接分享：http://www.dlmjj.cn/article/ihdsps.html
