关于前端:前端工程化3如何编写一个Nodejs-Cli应用自定义脚手架

什么是Nodejs Cli利用？

简略来说就是在命令行能够应用nodejs来执行的利用，例如：vue-cli、creat-react-app、webpack-cli等；在前端开发过程中咱们会用到很多的工具，这些工具在装置过后能够间接应用命令行执行；留神在全局装置和在我的项目装置不同。

// 全局装置，间接执行命令
> npm install webpack webpack-cli -g
> webpack

// 我的项目装置，须要借助npx执行
> npm install webpack webpack-cli --save-dev
> npx webpack

Nodejs Cli利用的工作流程！

1、启动过程：

命令行执行命令 => 依据package.json中bin查问入口 => 执行入口js文件cli.js

2、执行过程：

命令行执行js文件性能启动=> 命令行询问用户问题 => 联合问题答案+模板等文件 => 生成构造文件

Nodejs Cli利用的入口文件：cli.js

1、入口文件门路 ，首先在package.json 中增加bin字段

{
  "name": "ncl",
  "main": "index.js",
  "bin": {
    "ncl": "./cli.js"   //入口文件，ncl和name保持一致
  },
  ...
}

2、入口文件特定的文件头 ，在cli.js顶部输出

#!/usr/bin/env node

3、入口文件权限
// 如果是 Linux 或者 macOS 零碎下还须要批改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现批改

4、简略测试模块
npm link 能够将模块链接到全局，也能够链接到应用该模块的我的项目node_modules中；这样在开发模块的过程中，不必公布到npm也能够应用模块进行测试。

> npm link // 在自定义模块我的项目的目录执行，将模块连贯到全局
> ncl // 间接执行模块，应用模块名

Nodejs Cli利用的示例

该示例的性能实现一个自定义的脚手架：在命令行询问用户一些简略的问题作为参数，而后主动生成一些我的项目文件。其中的文件能够通过模板生成，也能够传递数据到模板。

1、装置一些依赖模块

> npm install inquirer --save //nodejs环境下，实现命令行的用户交互插件 
> npm install ejs --save //模板引擎

2、cli.js中定义命令行询问用户问题

inquire.prompt进行命令行的用户询问操作
inquirer.prompt返回值为一个promise对象
inquirer.prompt的参数为一个数组

const inquirer = require('inquirer')

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: '请输出项目名称?'
    }
])
.then(anwsers => {
    // anwsers: { name: "xxx" } //anwsers返回一个后果对象
})

const path = require('path')


// 模板目录
// __dirname 获取以后执行代码文件的绝对路径
// tmplDir 为templates的绝对路径
const tmplDir = path.join(__dirname, 'templates')

// 目标目录
// process.cwd()返回 Node.js 过程的当前工作目录。
// process参考api文档：http://nodejs.cn/api/process.html
const destDir = process.cwd()

4、模板引擎渲染模板

const ejs = require('ejs')
const path = require('path')

// 通过模板引擎渲染文件
// 参数1：fileDir为文件的绝对路径
// 参数2：渲染模板所需变量，存在anwsers对象外面
// 参数3：回调函数，result为新文件
ejs.renderFile(fileDir, anwsers, (err, result) => {
  if (err) throw err

  // 将后果写入指标文件门路
  fs.writeFileSync(fileDestDir, result)
})

// 一个package.json作为模板的示例：
{
"name": "<%= name %>",
  "version": "<%= version %>",
  "description": "<%= description %>",
  "author": "<%= author %>",
  "bin": "cli.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

5、读取目录下的文件

  // 将模板下的文件全副转换到目标目录
  // 参数1：path
  // 参数2：回调函数，参数files为文件相对路径组成的数组
  fs.readdir(tmplDir, (err, files) => {
    if (err) throw err
    files.forEach(file => {
      // 通过模板引擎渲染文件
      // 解决 file 
      })
    })
  })

6、将文件写入门路

// 将后果写入指标文件门路
// 参数1：文件的绝对路径
// 参数2：文件内容
fs.writeFileSync(fileDestDir, result)

模板文件相干

这里是依据本人的需要将须要主动生成的文件放到模板目录下，没有变动的或者对立的文件就不须要应用模板引擎。
1、模板门路：templates；

2、通常将整顿好的我的项目构造整体拷贝到templates下，例如：vue的示例源文件、lint文件、package.json等等；

测试模块执行

本地开发能够应用npm link关联模块目录和依赖此模块的我的项目node_modules目录；也能够公布到npm源上后间接装置应用模块。

1、关联模块：

> cd nodejs-cli-sample //Nodejs Cli利用的目录
> npm link // 将模块连贯到全局

2、执行模块：

> cd nodejs-cli-demo // 在我的项目目录执行模块
> ncl // 间接执行模块，应用模块名（ncl 是我的项目nodejs-cli-sample的名称）

公布Nodejs Cli利用

1、能够间接应用npm publish公布到源上

> npm publish --registry=https://registry.xxxx

2、要思考到npm源是否有写权限，能够公布到本人公司的npm源上或者yarn源上

// 淘宝镜像源是只读的，publish不下来
// 公布到yarn的镜像源之后，应用淘宝镜像源时能够手动同步放慢模块下载速度
yarn publish --registry https://registry.yarnpkg.com/

残缺示例代码

1、NodeJs Cli利用cli.js 入口文件

#!/usr/bin/env node


// Node CLI 利用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 零碎下还须要批改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现批改

const fs = require('fs')    // 文件读写
const path = require('path')    // 门路获取
const inquirer = require('inquirer')    //命令行用户交互
const ejs = require('ejs')  // 模板引擎


// 脚手架的工作过程：启动 => 命令行询问用户问题 => 联合问题答案+模板 => 生成构造文件

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: '请输出项目名称(\'\')'
    },
    {
        type: 'input',
        name: 'version',
        message: '请输出我的项目版本号(1.0.0)'
    },
    {
        type: 'input',
        name: 'description',
        message: '请输出我的项目备注(\'\')'
    },
    {
        type: 'input',
        name: 'author',
        message: '请输出作者名称(\'\')'
    }
])
.then(anwsers => {
    // anwsers: { name: "xxx" } //anwsers返回一个后果对象

    // 模板目录绝对路径
    const tmplDir = path.join(__dirname, 'templates')
    // 目标目录
    const destDir = process.cwd()

    // 读取目录下所有文件
    let readFiles = (dir) => {
        return new Promise((resolve, reject)=>{
            // 参数1：目录门路
            // 参数2：回调函数（谬误对象，files为文件相对路径组成的数组）
            fs.readdir(dir, (err, files) => {
                if (err) reject(err)
                resolve(files)
            })
        })
    }

    // 解决模板文件
    let ejsRender = (file) => {
        return new Promise((resolve, reject)=>{
            // 模板文件绝对路径
            let dir = path.join(tmplDir, file)
            // 参数1：文件门路
            // 参数2：数据对象
            // 参数3：回调函数（谬误对象，渲染后的新文件）
            ejs.renderFile(dir, anwsers, (err, result) => {
                if (err) reject(err)
                resolve(result)
            })
        })
    }


    // 1、先读取目录下所有文件
    // 2、应用ejs渲染所有模板
    // 3、再将新文件写到指标门路
    readFiles(tmplDir).then((files)=>{
        files.forEach(file => {
            ejsRender(file).then((result)=>{
                // 指标文件绝对路径，file其实是文件相对路径
                let fileDestDir = path.join(destDir, file)
                // 将后果写入指标文件门路
                // 参数1：文件绝对路径
                // 参数2：渲染后新文件
                fs.writeFileSync(fileDestDir, result)
            },throwError)
        })

    },throwError)
})

/**
 * 谬误处理函数
 * @param {*谬误对象} error 
 */
function throwError(error){
    throw error
}

2、package.json 示例模板文件，应用的ejs模板引擎

{
"name": "<%= name %>",
  "version": "<%= version %>",
  "description": "<%= description %>",
  "author": "<%= author %>",
  "bin": "cli.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

关于前端:前端工程化3如何编写一个Nodejs-Cli应用自定义脚手架

什么是Nodejs Cli利用？

Nodejs Cli利用的工作流程！

Nodejs Cli利用的入口文件：cli.js

Nodejs Cli利用的示例

模板文件相干

测试模块执行

公布Nodejs Cli利用

残缺示例代码

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:前端工程化3如何编写一个Nodejs-Cli应用自定义脚手架

什么是Nodejs Cli利用？

Nodejs Cli利用的工作流程！

Nodejs Cli利用的入口文件：cli.js

Nodejs Cli利用的示例

模板文件相干

测试模块执行

公布Nodejs Cli利用

残缺示例代码

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复