欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Node?Js開發(fā)環(huán)境的搭建全過程記錄

 更新時間：2024年11月26日 11:03:51   作者：炑焽  
這篇文章詳細(xì)介紹了腳手架工具在軟件開發(fā)中的作用,包括常見的腳手架工具、腳手架的基本能力、搭建腳手架的方法、commander命令參數(shù)處理工具的使用、模塊化拆分、下載遠(yuǎn)程倉庫代碼等,需要的朋友可以參考下

前言

通過自動化繁瑣的設(shè)置和配置工作，幫助開發(fā)者快速啟動新項目。常見的Node腳手架工具包括Yeoman、Express Generator、Create React App等。

一、什么是腳手架

1、什么是腳手架？

腳手架在軟件開發(fā)中指的是一種自動化工具或腳本，用于快速創(chuàng)建和配置項目的基本結(jié)構(gòu)和配置文件。腳手架工具可以幫助開發(fā)者快速啟動新項目，減少手動配置和重復(fù)工作，提高開發(fā)效率。

  • 全局命令行工具
  • 創(chuàng)建項目初始化代碼文件及目錄

2、腳手架的基本能力

  • 項目模板生成

根據(jù)預(yù)定義的模板生成項目的目錄結(jié)構(gòu)和初始文件

  • 依賴管理

自動生成和更新項目的依賴文件（如package.json），并安裝必要的依賴包

  • 配置文件生成

創(chuàng)建項目所需的各種配置文件（如.eslintrc, .gitignore, webpack.config.js等）。

  • 代碼生成

自動生成常見的代碼模塊和樣板代碼，如路由、控制器、模型等。

  • 交互式問答

通過交互式問答方式詢問用戶的偏好和需求，從而生成定制化的項目配置。

  • 自動化腳本

提供一些預(yù)定義的NPM腳本或其他自動化腳本，用于常見的開發(fā)任務(wù)（如構(gòu)建、測試、啟動服務(wù)器等）。

二、搭建腳手架

1、如何實現(xiàn)一個自己的腳手架工具

  • 初始化一個vite項目
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 ↗
  • 通過以下命令運行項目
Done. Now run:
  cd vite-project
  npm install
  npm run dev

2、創(chuàng)建自定義全局指令

  • 新建一個nojs文件，然后創(chuàng)建bin/cli.js

  • 在nojs文件下初始化一個項目，然后一路回車

npm init
  • 在package.json中添加一個name
"name": "bincli",
  • bin/cli.js中寫入,

#! /usr/bin/env node的作用:告訴操作系統(tǒng)用什么解釋器來執(zhí)行文件。
#! 是 shebang 的標(biāo)志,/usr/bin/env 是一個 Unix 程序，它可以找到并運行指定的程序，node 指定要使用 Node.js 解釋器來執(zhí)行腳本。
當(dāng)在文件頂部加上這一行并使文件可執(zhí)行，可以直接運行該文件，而無需在命令行中顯式調(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包鏈接

  • 安裝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 方法定義一個命令行選項。
-f 是短選項，--framework 是長選項，<framework> 表示這個選項需要一個參數(shù)。
"設(shè)置框架" 是對這個選項的描述，用于幫助信息中顯示。
*/
program.option("-f --framwork <framwork>", "設(shè)置框架");
// 解析傳遞給腳本的命令行參數(shù)
program.parse(process.argv);
console.log(`選定的框架是: ${program.framework}`);
  • 執(zhí)行bincli --help命令

3. create創(chuàng)建一個內(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)建項目")
  .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)建項目")
    .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: "請選擇你所使用的框架",
      },
    ])
    .then((answer) => {
      console.log(answer, "answer");
    });
};
module.exports = myAction;
  • 執(zhí)行bincli create nodefm 命令
bincli create nodefm
  • 通過上下箭頭選擇，空格進行確認(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: "請選擇你所使用的框架",
      },
    ])
    .then((answer) => {
      console.log(answer, "answer");
    });
};
module.exports = myAction;

五、下載遠(yuǎn)程倉庫代碼

1、download-git-repo包使用

download-git-repo 是一個 Node.js 模塊，用于從 Git 倉庫中下載代碼。通過命令行或者在 Node.js 代碼中進行下載操作。

  • 安裝模塊
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Node.js里面的內(nèi)置模塊和自定義模塊的實現(xiàn)

    Node.js里面的內(nèi)置模塊和自定義模塊的實現(xiàn)

    這篇文章主要介紹了Node.js里面的內(nèi)置模塊和自定義模塊的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • nodejs實現(xiàn)登陸驗證功能

    nodejs實現(xiàn)登陸驗證功能

    這篇文章主要為大家詳細(xì)介紹了nodejs實現(xiàn)登陸驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • 如何使用npm安裝yarn詳解

    如何使用npm安裝yarn詳解

    Yarn是一個新的快速安全可信賴的可以替代NPM的依賴管理工具,下面這篇文章主要給大家介紹了關(guān)于如何使用npm安裝yarn的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • koa router 多文件引入的方法示例

    koa router 多文件引入的方法示例

    這篇文章主要介紹了koa router 多文件引入的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • npm全局模塊卸載及默認(rèn)安裝目錄修改方法

    npm全局模塊卸載及默認(rèn)安裝目錄修改方法

    今天小編就為大家分享一篇npm全局模塊卸載及默認(rèn)安裝目錄修改方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-05-05
  • node實現(xiàn)簡單的增刪改查接口實例代碼

    node實現(xiàn)簡單的增刪改查接口實例代碼

    在本篇文章里小編給大家整理的是關(guān)于node實現(xiàn)簡單的增刪改查接口的相關(guān)實例內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。
    2019-08-08
  • Node.js編寫CLI的實例詳解

    Node.js編寫CLI的實例詳解

    Node.js的應(yīng)用場景有前后端分離、海量web頁面渲染服務(wù)、命令行工具和桌面端應(yīng)用等等。本篇文章選取CLI(Command Line Tools)子領(lǐng)域，來談?wù)凬ode.js編寫CLI的實踐，讓CLI切實解決實際工程問題。
    2017-05-05
  • Nodejs學(xué)習(xí)筆記之入門篇

    Nodejs學(xué)習(xí)筆記之入門篇

    本系列教程致力于教會你如何用Node.js來開發(fā)應(yīng)用，過程中會傳授你所有所需的“高級”JavaScript知識。絕不是一篇“Hello World”的教程。
    2015-04-04
  • nodejs16.15.0版本如何解決node-sass和sass-loader版本沖突問題

    nodejs16.15.0版本如何解決node-sass和sass-loader版本沖突問題

    這篇文章主要介紹了nodejs16.15.0版本如何解決node-sass和sass-loader版本沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • node中間層實現(xiàn)文件上傳功能

    node中間層實現(xiàn)文件上傳功能

    這篇文章主要介紹了node中間層實現(xiàn)文件上傳功能,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2018-06-06

最新評論