NPM与CLI工具详解-优快云博客

本文链接：https://blog.youkuaiyun.com/matt_gcm/article/details/107753023

NPM

cli：

1、commander
2、chalk
3、inquirer

npn:
添加：npm install； （npm install  xxx@x.x.x.x下载其他版本） 查看 npm ls；  删除 npm uninstall ； 更新：update（从低想高更新，不可以反向更新）

npm install   ；  yarn install  //下载依赖，需要package.json

npm发布自己的包方法需要一个package.json，可以在命令行中执行代码帮助创建package.json文件
例如：npm init   /   npm init --yes（默认同意会直接使用你的文件名当项目名称）

commander

// console.log( process.argv );

//const commander = require('commander');

// 设置当前命令的版本
//commander.version('v1.0.0', '-v, --version');

// 设置其他option，--name 后面的 [val] 是当前这个选项的参数值
// []表示可选，<>表示必填
// 如果第三个参数是一个函数的话，那么该函数会接受来自用户输入的值
// 并返回一个值作为 最后 这个选项实际的值
// commander.option('-n, --name [val]', '设置名称', '');
// commander.option('-n, --name [val]', '设置名称', function(val) {
//     console.log(val);
//     return val.toUpperCase();
// });

//commander.command('create');

// 设置命令的动作
//commander.action(() => {
 //   console.log('Hello ' + commander.name);
});

// 解析来自process.argv上的数据，会自动帮助我们添加一个 -h 的解析
//commander.parse( process.argv );

// console.log( commander.name );

chalk:文字的修饰：斜体，加粗重windows下（cmd）下支持不是特别的好

/**
 * ls
 *  输出当前运行命令所在的目录下的文件和文件夹
 * ls -p d:\
 *  我们还可以指定要显示的目录


// 加载commander模块
const commander = require('commander');
// 加载fs模块
const fs = require('fs');
// 美化
const chalk = require('chalk');

// 文字的修饰：斜体，加粗重windows下（cmd）下支持不是特别的好
// console.log(chalk.italic('Hello world!') + ' miaov');

// console.log(chalk.bold.red.bgGreen('Hello world!') + ' miaov');

// process.exit();

// 设置当前命令工具的版本
commander.version('v1.0.0', '-v, --version');

// 设置命令选项
commander.option('-p, --path [path]', '设置要显示的目录', __dirname);

//commander.path = undefined;
// console.log(commander.path);
// process.exit();

// 以列表的形式显示，如果选项不接收用户输入的值，那么这个选项将以boolean的形式提供给后面命令使用
commander.option('-l, --list', '以列表的形式显示');

// 实现命令的具体逻辑
commander.action( () => {
    // console.log(commander)
    // return;

    // option中的变量会挂在到当前commander对象的同名属性下
    // console.log(commander.list);

    try {
        const files = fs.readdirSync( commander.path );
        //console.log( files );

        if ( commander.list ) {
            // 如果commander.list为true，以列表的形式显示

            // 通过map生成要显示的数据
            let output = files.map( file => {

                // 文件的扩展信息（除了文件内容以外的信息）
                let stat = fs.statSync( commander.path + '/' + file );
                // console.log(stat.isDirectory());
                // 根据isDirectory()显示不同的文件类型
                return stat.isDirectory() ? chalk.red(`[目录]   ${file}\r\n`) : `[文件]   ${file}\r\n`;

                // return `[${type}] ${file}\r\n`;

            } ).join('');

            console.log(output);
        } else {
            console.log( files );
        }

    } catch(e) {
        // 开发过程中，可以把错误打印出来，实际发布以后应该屏蔽错误信息
        console.log(e);
    }
} );

commander.parse( process.argv );
*/

inquirer:与用户进行命令行的交互

const inquirer = require('inquirer');

/* 提问用户，与用户进行命令行的交互
// prompt数组中存放一个指定格式的对象，我们称为question对象
inquirer.prompt([

    {
        type: 'input',
        name: 'username',
        message: '请输入你的应用名称',
        default: 'app',
        // 对用户输入的数据或选择的数据进行验证
        validate(val) {
            if (val.trim() === '') {
                return '应用名称不能为空';
            }
            return true;
        },
        // 对用户输入的数据或选择的数据进行过滤
        filter(val) {
            return val.toLowerCase();
        }
    },

    {
        type: 'confirm',
        name: 'useES6',
        message: '是否启用ES6支持',
        default: true
    },
    {
        type: 'list',
        name: 'framework',
        message: '请选择框架：',
        choices: ['Vue', 'React', 'Angular'],
        default: 1
    },
    // {
    //     type: 'rawlist',
    //     name: 'framework2',
    //     message: '请选择框架：',
    //     choices: ['Vue', 'React', 'Angular'],
    //     default: 1
    // },
    {
        type: 'checkbox',
        name: 'tools',
        message: '开发工具',
        choices: [
            {
                name: '使用ESLint',
                value: 'eslint',
                checked: true
            },
            {
                name: '使用mocha单元测试',
                value: 'mocha'
            }
        ]
    }

]).then(answers=>{
    console.log(answers);
})

gul：

electron

electron哎来赚(npm run dev)
const {app, BrowserWindow，Menu，MenuItem} = require('electron');
npm init
app 对象
app.BrowserWindow创建和控制浏览器窗口:大小放大全屏之类的
app.Menu菜单类

/* console.log('Hello');
// console.log(__dirname);

// const electron = require('electron');

// console.log(electron.app);

/**
 * 事件
 * 属性
 * 方法
 */

/* const {app, BrowserWindow} = require('electron');

// Event.Emmiter
app.on('ready', () => {
    // console.log('ok');

    // setTimeout(() => {
    //     app.exit();
    // }, 2000)



    let bw1 = new BrowserWindow({
        width: 800,
        height: 600,
        // resizable: false,
        // alwaysOnTop: true,
        title: '不不不',
        // frame: false,
        // transparent: true
    });
    let bw2 = new BrowserWindow({
        width: 400,
        height: 300,
        // resizable: false,
        // alwaysOnTop: true,
        title: 'aaa',
        parent: bw1,
        modal : true
    });

    // 与窗口有关的浏览器中的内容都是通过下面的属性类操作的
    // bw1.webContents;
    // bw1.webContents.openDevTools();


    // console.log(bw1.id);
    // console.log(bw2.id);


    // 加载指定的页面到窗口中，支持绝对路径，但是推荐使用相对
    // 路径，而且路径在解析的时候会被处理，相对路径默认指向
    // 应用程序的根目录
    bw1.loadFile('./layout/index.html');

    // 支持加载远程文件，支持http协议，也支持file协议
    // bw1.loadURL('https://www.miaov.com');
    
});

Menu菜单类

/*const {app, BrowserWindow, Menu, MenuItem} = require('electron');

app.on('ready', () => {

    let bw1 = new BrowserWindow();
    // let bw2 = new BrowserWindow();

    // 创建菜单对象
    let m1 = new Menu();

    // 创建菜单项
    let mi1 = new MenuItem({
        type: 'normal',
        label: '文件'
    });

    // 把菜单项添加到指定的菜单对象中
    m1.append( mi1 );

    // 创建菜单项
    let mi2 = new MenuItem({
        type: 'submenu',
        label: '查看',
        submenu: [
            {
                type: 'normal',
                label: '文件'
            },
            {
                type: 'separator'
            },
            {
                type: 'normal',
                label: '文件夹'
            },
            {
                type: 'checkbox',
                label: '选项一',
                checked: true
            },
            {
                type: 'separator'
            },
            {
                type: 'radio',
                label: 'AAAA'
            },
            {
                type: 'radio',
                label: 'BBBB'
            },
            {
                type: 'separator'
            },
            // {
            //     role: 'quit',
            //     label: '退出'
            // }
            {
                type: 'normal',
                label: '退出',
                click() {
                    app.quit();
                }
            }
        ]
    });
    m1.append( mi2 );

    // 指定该菜单显示的主体（具体哪个窗口、右键-上下文）
    /**
     * 菜单位置：
     *  1. 应用程序的顶层菜单
     *  2. 上下文菜单
     */
    // 把菜单添加到应用程序窗口最顶层
    Menu.setApplicationMenu( m1 );

})

主进程主动发送消息到渲染进程

/*const {app, BrowserWindow, ipcMain} = require('electron');

// 主进程
let username = 'zMouse';

global.username = username;

let datas = {
    username: 'zMouse',
    gender: '男'
}

app.on('ready', () => {

    const win = new BrowserWindow();


    win.webContents.openDevTools();

    win.loadFile('./layout/index.html');

    // 监听渲染进程 ipcRenderer 发送的消息

    ipcMain.on('getData', function(e, key) {
        // console.log(data);

        // e.sender => 通过这个对象返回消息给渲染进程
        e.sender.send('sendData', datas[key]);

    });

    // 主进程主动发送消息到渲染进程
    setTimeout(() => {
        win.webContents.send('hello', 'hello........', 10, 20, 30);
    }, 2000);


    const win2 = new BrowserWindow();
    win2.webContents.openDevTools();

    win2.loadFile('./layout/index2.html');*/
    /*


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>App</h1>

    <button>按钮</button>
    <button>按钮2</button>

    <script>
    
        // 在渲染进程中不能直接获取到主进程中的数据
        // console.log(username);

        // 在渲染进程中也可以使用electron对象
        // electron对象下面有的属性方法只能在主进程中使用，有的
        // 是在渲染进程中有的

        const {remote, ipcRenderer} = require('electron');

        // console.log(electron);

        // 如果需要访问主进程中的数据，那么我们可以通过渲染进程中的electron下有一个
        // 子对象：remote =》 主进程
        
        // console.log(remote);

        // 该对象下有一个方法：getGlobal，可以通过该方法来获取主进程中的全局数据

        // console.log(remote.getGlobal('username'));

        // IPC
        
        const buttons = document.querySelectorAll('button');

        buttons[0].onclick = function() {

            ipcRenderer.send('getData', 'username');

        }

        ipcRenderer.on('sendData', function(e, data) {
            console.log(data);
        });

        ipcRenderer.on('hello', function(e, ...data) {
            console.log(data);
        });

        // 当按钮2倍点击的时候，产生一个数据
        buttons[1].onclick = function() {
            // storage
            localStorage.setItem('val', 'zMouse');
        }

    </script>
</body>
</html>
});