如何开发一款前端工具

mkdir samlpe-clicd sample-cli

yarn init

{  "name": "sample-cli",  "bin": "cli.js",  ...}

#! /usr/bin/env node
console.log('cli working')

yarn link

sample-cli

1. 通过命令行交互的方式询问用户信息

2. 根据用户反馈回来的结果生成文件

yarn add inquirer --dev

const inquirer = require('inquirer');
inquirer.prompt([    {        type: 'input',        name: 'name',        message: 'Project name'    }]).then(answer => {    console.log(answer);})

sample-cli

body {    margin: 0;    background-color: red;}

const path = require('path');
// 工具当前目录const tmplDir = path.join(__dirname, 'templates');

const path = require('path');
// 工具当前目录const tmplDir = path.join(__dirname, 'templates');// 命令行所在目录const destDir = process.cwd();

fs.readdir(tmplDir, (err, files) => {    if (err) {        throw err;    }    files.forEach(file => {        console.log(file); // 得到每个文件的相对路径    })})

yarn add ejs --dev

const fs = require('fs');const path = require('path');const inquirer = require('inquirer');const ejs = require('ejs');
// 工具当前目录const tmplDir = path.join(__dirname, 'templates');// 命令行所在目录const destDir = process.cwd();
inquirer.prompt([    {        type: 'input',        name: 'name',        message: 'Project name'    }]).then(answer => {    fs.readdir(tmplDir, (err, files) => {        if (err) {            throw err;        }        files.forEach(file => {            ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {                if (err) {                    throw err;                }                console.log(result);            })        })    })})

sample-cli

files.forEach(file => {    ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {        if (err) {            throw err;        }        fs.writeFileSync(path.join(destDir, file), result);    })})

sample-cli

npm adduser

npm login

npm publish

{  "name": "sample-cli1",  "version": "1.0.0",  "bin": "cli.js",  ...}

npm config set registry https://registry.npmjs.org/

{  "name": "sample-cli1",  "version": "1.0.1",  "bin": "cli.js",  ...}

npm unpublish