Node?Js開發(fā)環(huán)境的搭建全過程記錄
更新時(shí)間：2024年11月26日 11:03:51 作者：炑焽
這篇文章詳細(xì)介紹了腳手架工具在軟件開發(fā)中的作用,包括常見的腳手架工具、腳手架的基本能力、搭建腳手架的方法、commander命令參數(shù)處理工具的使用、模塊化拆分、下載遠(yuǎn)程倉(cāng)庫(kù)代碼等,需要的朋友可以參考下
前言
通過自動(dòng)化繁瑣的設(shè)置和配置工作，幫助開發(fā)者快速啟動(dòng)新項(xiàng)目。常見的Node腳手架工具包括Yeoman、Express Generator、Create React App等。
一、什么是腳手架
1、什么是腳手架？
腳手架在軟件開發(fā)中指的是一種自動(dòng)化工具或腳本，用于快速創(chuàng)建和配置項(xiàng)目的基本結(jié)構(gòu)和配置文件。腳手架工具可以幫助開發(fā)者快速啟動(dòng)新項(xiàng)目，減少手動(dòng)配置和重復(fù)工作，提高開發(fā)效率。
- 全局命令行工具
- 創(chuàng)建項(xiàng)目初始化代碼文件及目錄
2、腳手架的基本能力
- 項(xiàng)目模板生成
根據(jù)預(yù)定義的模板生成項(xiàng)目的目錄結(jié)構(gòu)和初始文件
- 依賴管理
自動(dòng)生成和更新項(xiàng)目的依賴文件（如package.json），并安裝必要的依賴包
- 配置文件生成
創(chuàng)建項(xiàng)目所需的各種配置文件（如.eslintrc, .gitignore, webpack.config.js等）。
- 代碼生成
自動(dòng)生成常見的代碼模塊和樣板代碼，如路由、控制器、模型等。
- 交互式問答
通過交互式問答方式詢問用戶的偏好和需求，從而生成定制化的項(xiàng)目配置。
- 自動(dòng)化腳本
提供一些預(yù)定義的NPM腳本或其他自動(dòng)化腳本，用于常見的開發(fā)任務(wù)（如構(gòu)建、測(cè)試、啟動(dòng)服務(wù)器等）。
二、搭建腳手架
1、如何實(shí)現(xiàn)一個(gè)自己的腳手架工具
- 初始化一個(gè)vite項(xiàng)目
npm init vite@latest
- 選擇vue
? Select a framework: ? - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others
- 選擇JavaScript
? Select a variant: ? - Use arrow-keys. Return to submit.
TypeScript
> JavaScript
Customize with create-vue ↗
Nuxt ↗
- 通過以下命令運(yùn)行項(xiàng)目
Done. Now run: cd vite-project npm install npm run dev
2、創(chuàng)建自定義全局指令
新建一個(gè)
nojs文件，然后創(chuàng)建bin/cli.js在
nojs文件下初始化一個(gè)項(xiàng)目，然后一路回車
npm init
- 在package.json中添加一個(gè)name
"name": "bincli",
bin/cli.js中寫入,
#! /usr/bin/env node的作用:告訴操作系統(tǒng)用什么解釋器來執(zhí)行文件。#!是 shebang 的標(biāo)志,/usr/bin/env是一個(gè) Unix 程序，它可以找到并運(yùn)行指定的程序，node指定要使用 Node.js 解釋器來執(zhí)行腳本。
當(dāng)在文件頂部加上這一行并使文件可執(zhí)行，可以直接運(yùn)行該文件，而無需在命令行中顯式調(diào)用 node 命令。
#! /usr/bin/env node
console.log("bincli");
- 創(chuàng)建自定義全局指令
npm link bincli
- 修改cli.js文件
#! /usr/bin/env node
// console.log("bincli");
console.log(process.argv);
獲取
bincli后面的參數(shù)--help
bincli --help
- 獲取到cli.js中的命令參數(shù)
#! /usr/bin/env node
if(process.argv[2]=='--help'){
console.log("獲取命令參數(shù)");
}
三、commander命令參數(shù)處理工具
1、安裝commander包
- 安裝commander
npm i commander
- cli.js文件內(nèi)容修改
#! /usr/bin/env node
const { program } = require("commander");
program.parse(process.argv);
bincli --help
2、自定義命令參數(shù)處理
- 修改cli.js內(nèi)容
#! /usr/bin/env node
const { program } = require("commander");
/*
使用 .option 方法定義一個(gè)命令行選項(xiàng)。
-f 是短選項(xiàng)，--framework 是長(zhǎng)選項(xiàng)，<framework> 表示這個(gè)選項(xiàng)需要一個(gè)參數(shù)。
"設(shè)置框架" 是對(duì)這個(gè)選項(xiàng)的描述，用于幫助信息中顯示。
*/
program.option("-f --framwork <framwork>", "設(shè)置框架");
// 解析傳遞給腳本的命令行參數(shù)
program.parse(process.argv);
console.log(`選定的框架是: ${program.framework}`);
- 執(zhí)行
bincli --help命令
3. create創(chuàng)建一個(gè)內(nèi)容命令
- 修改
cli.js
#! /usr/bin/env node
const { program } = require("commander");
program.option("-f --framwork <framwork>", "設(shè)置框架");
program
.command("create <project> [other...]")
.alias("crt")
.description("創(chuàng)建項(xiàng)目")
.action((project, args) => {
console.log(project);
console.log(args);
});
program.parse(process.argv);
- 執(zhí)行
bincli create xxx k gf l命令
- 執(zhí)行
bincli --help命令
四、模塊化拆分
1、代碼封裝
lib/core/help.js
const myhelp = function (program) {
program.option("-f --framwork <framwork>", "設(shè)置框架");
};
module.exports = myhelp;
lib/core/mycommander.js
const myAction = require("./action");
const mycommander = function (program) {
program
.command("create <project> [other...]")
.alias("crt")
.description("創(chuàng)建項(xiàng)目")
.action(myAction);
};
module.exports = mycommander;
lib/core/action.js
const myAction = (project, args) => {
console.log(project);
console.log(args);
};
module.exports = myAction;
bin/cli.js
#! /usr/bin/env node
const { program } = require("commander");
const myhelp = require("../lib/core/help");
myhelp(program);
const mycommander = require("../lib/core/mycommander");
mycommander(program);
program.parse(process.argv);
- 執(zhí)行
bincli命令
bincli
2、命令行問答交互
- 安裝
inquirer包
npm install inquirer
- 新建
test/inquirer.js文件
var inquirer = require("inquirer");
// console.log(inquirer.default.prompt, "inquirer.prompt");
inquirer.default
.prompt([
{
type: "input", // 可以輸入的類型
name: "username",
message: "你的名字",
},
])
.then((answer) => {
console.log(answer);
});
- 執(zhí)行
node test/inquirer.js命令
node test/inquirer.js
3、命令行自定義選擇框架
- 修改
lib/core/action.js文件
var inquirer = require("inquirer");
const myAction = (project, args) => {
// console.log(project);
// console.log(args);
inquirer.default
.prompt([
{
type: "list",
name: "framwork",
choices: ["express", "koa", "egg"],
message: "請(qǐng)選擇你所使用的框架",
},
])
.then((answer) => {
console.log(answer, "answer");
});
};
module.exports = myAction;
- 執(zhí)行
bincli create nodefm命令
bincli create nodefm
- 通過
上下箭頭選擇，空格進(jìn)行確認(rèn)
4、使用config.js來定義框架配置類型
使用config.js來定義框架配置類型,可以通過直接在config.js里修改來控制變量
- 新建
config.js文件
module.exports = {
framwork: ["express", "koa", "egg"],
};
- 修改
lib/core/action.js文件引入config文件
var inquirer = require("inquirer");
var config = require("../../config");
const myAction = (project, args) => {
// console.log(project);
// console.log(args);
inquirer.default
.prompt([
{
type: "list",
name: "framwork",
choices: config.framwork,
message: "請(qǐng)選擇你所使用的框架",
},
])
.then((answer) => {
console.log(answer, "answer");
});
};
module.exports = myAction;
五、下載遠(yuǎn)程倉(cāng)庫(kù)代碼
1、download-git-repo包使用
download-git-repo 是一個(gè) Node.js 模塊，用于從 Git 倉(cāng)庫(kù)中下載代碼。通過命令行或者在 Node.js 代碼中進(jìn)行下載操作。
- 安裝模塊
npm install download-git-repo
- Node.js 腳本中引入 download-git-repo 模塊,新建
test/download.js
const download = require("download-git-repo");
download(
"direct:git@github.com:Muying-Zhao/MuYing-docs.git",
"./xxx",
{ clone: true },
function (err) {
if (err) {
console.error("下載失敗", err);
} else {
console.log("下載成功");
}
}
);
- 執(zhí)行
node test/download.js命令
node test/download.js
總結(jié)
到此這篇關(guān)于Node Js開發(fā)環(huán)境的搭建的文章就介紹到這了,更多相關(guān)Node Js開發(fā)環(huán)境搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了node版本快速切換及管理方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Node.js安裝教程和NPM包管理器使用詳解,安裝部分講解了Windows、和MAC OS下的安裝圖解,并介紹了Linux下的源碼安裝方法,最后對(duì)NPM包管理器做了詳細(xì)介紹,需要的朋友可以參考下2014-08-08
在Node.js開發(fā)過程中,npm install 是安裝和管理項(xiàng)目依賴的關(guān)鍵命令,然而,有時(shí)我們會(huì)遇到 npm install 運(yùn)行卡住不動(dòng)的情況,本文將為你提供七種解決方案,幫助你順利進(jìn)行依賴安裝,需要的朋友可以參考下2024-07-07
nodejs簡(jiǎn)單實(shí)現(xiàn)中英文翻譯
這篇文章主要介紹了nodejs簡(jiǎn)單實(shí)現(xiàn)中英文翻譯的方法和示例，雖然還存在著不小的問題，但是也算是基本能用了，這里推薦給大家。2015-05-05
本篇文章主要介紹了Node.js readline模塊與util模塊的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
node作為中間服務(wù)層如何發(fā)送請(qǐng)求(發(fā)送請(qǐng)求的實(shí)現(xiàn)方法詳解)
node作為中間服務(wù)層如何發(fā)送請(qǐng)求？下面小編就為大家分享一下發(fā)送請(qǐng)求的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2018-01-01
node.js基于socket.io快速實(shí)現(xiàn)一個(gè)實(shí)時(shí)通訊應(yīng)用
這篇文章主要介紹了node.js基于socket.io快速實(shí)現(xiàn)一個(gè)實(shí)時(shí)通訊應(yīng)用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了解讀node.js中的path路徑模塊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了node詳細(xì)安裝教程及Vue腳手架搭建的相關(guān)資料,包括國(guó)內(nèi)鏡像設(shè)置、項(xiàng)目創(chuàng)建及運(yùn)行配置,覆蓋從安裝到啟動(dòng)的完整實(shí)踐步驟,需要的朋友可以參考下2025-09-09
Node綁定全局TraceID的實(shí)現(xiàn)方法
這篇文章主要介紹了Node 綁定全局 TraceID的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11