阅读 498

[脚手架搭建]如何搭一个自己的脚手架

由于react的脚手架配置项过多,导致项目生成很慢,每次都要等待很久。自己搭建环境的话,每次都进行搭建又有很多重复性的工作。

所以笔者就打算自己搭建一个脚手架name:simple-create-react,简化了打包环境配置并提供可选配置(axios,react-router-dom,redux,react-redux)的功能。

一、初始化包

npm init -y

package.json中增加两项

"bin":{
	testCli:"./main.js"
}
"private":false
复制代码

bin目录下的testCli 表示,我们在命令行输入testCli 则会调用main.js内的内容,

private:false 表示内容是公开的,即可以被npm发布的

在main.js中增加

#!/usr/bin/env node 
复制代码

其中 #!/usr/bin/env node 的作用就是这行代码是当系统运行到这一行的时候,去 env 中查找 node 配置,并且调用对应的解释器来运行之后的 node 程序

然后我们需要测试代码,这里可能需要用到 npm link 或者 npm install -g 。这样在命令行执行testCli就可以看到你在main.js中写入的代码,这里写一个hello world

console.log("Hello World")
复制代码

npm link: 将当前package链接到全局 —— npm unlink

npm install -g: 将当前package安装到全局 —— npm uninstall -g

二、增加功能

交互命令—— 使用commander

const { program } = require('commander')

program
    .version('0.1.0')  // --version 版本
    .command('init <name> [branch]') // 初始化命令
    .description('初始化项目文件')
    .action( (name,branch) => { // 得到name 
        console.log('Hello World') // 进行输出
    })

program.parse(process.argv) // 解析变量
复制代码

The arguments may be <required> or [optional],尖括号必须,optional可选

文件拉取 —— 使用download-git-repo

download("direct:https://github.com/oniya24/simple-create-react_template.git",
targetPath,{ clone:true }, // 目标路径
(err)=>{ // 回调函数
    console.log(err)
}
复制代码

坑:'git clone' failed with status 128 通过git clone拉取出错

将git改为通过 direct: http:// URl的方式进行clone

命令行交互 —— 使用inquirer

program
    .version('0.1.0')
    .command('init <name>')
    .description('初始化模板')
    .action( (name) => {
        inquirer.prompt([
            {
                name:"description",
                message:"请输入描述"
            },{
                name:"author",
                message:"请输入作者"
            }
        ]).then((paramater)=>{
            console.log(paramater);
        })})
复制代码

prompt提交一个询问数组,name是key值,message是输入时的提示,

返回一个对象,返回上述字段输入的value,{ description: xxx, author: yyy}

替换模板内容 —— 使用 handlebars

// 输入源模板
const source = "<p>description is {{description}} , author is {{ author }}</p> ";
// 进行模板的解析
const template = Handlebars.compile(source);
// 内容的定义
const paramater = { description: 'xxx', author: 'yyy' };
// 进行内容的替换
console.log(template(paramater));
// description is xxx,author is  yyy
复制代码

由这个模板我们可以替换掉配置文件的内容,所以我们需要将模板的package.json进行改造,然后下载模板成功后,通过inquirier查询到的变量,进行内容的替换

// package.json

author: "{{ author }}",
description: "{{ description }}"
复制代码

拉取到代码之后,通过fs模块首先判断是否有package.json文件,如果有则读取文件内容,对文件内容通过handlebars进行内容的替换,然后再写入文件中。

const content = fs.readFileSync(packagePath).toString();
const template = Handlebars.compile(content);
const result = template(paramater);
fs.writeFileSync(packagePath,result);
复制代码

美化命令行 —— 使用chalk ora

高亮终端打印出来的信息:chalk。

终端加载效果:ora, 在代码拉取过程有加载的效果

const spinner = ora("模板下载中^.^ 请稍后");
spinner.start();
spinner.success();
chalk.green('成功了');
chalk.red('失败了')
复制代码

整体代码

静态拉取代码见:github.com/oniya24/sim… 的staticFillPull的文件

三、可选择配置项

我们发现基础功能已经实现了,但是还存在两个问题

  1. 拉取的是静态代码,对于一些我们不需要的配置,如react-router、loadsh无法选择
  2. 拉取代码后还需要自己进行npm install,不能直接使用

如何实现按需添加 —— inquirer的type + handlebars的判断

查阅资料后发现,我们的inquirer功能比较强大,还可以通过更改type,来支持confirm判断或者list选择,所以选择的部分我们就可以用inquirer来实现,然后根据我们查询得到的结果进行package.json的更改。

Confirm - {type: 'confirm'}

Take type, name, message, [default] properties. default is expected to be a boolean if used.

package.json中我们需要用到模板的写法,这里再次查阅handlebars的文档,发现它支持判断语句(nice!)

官网文档:handlebarsjs.com/guide/

{{#if isReactRedux}}
 "react-redux": "^7.2.0",
 {{/if}}
 {{#if isReactRouterDom}}
 "react-router-dom": "^5.1.2",
 {{/if}}
 {{#if redux}}
 "redux": "^4.0.5",
 {{/if}}
复制代码

这样可选配置的部分我们就完成了,大家可以根据自己的需要来增删配置。

如何实现node命令的使用 —— child_process

process.cwd()返回当前执行目录

使用child_process的spawn()启动一个子进程执行命令,参数(command, [args], [option])

这里增加了三个参数,cwd命令执行目录,stdio:"inherit"继承父进程的输入输出流,shell:在shell下执行

与exec()方法均开启一个子进程执行命令,不同的是exec()有一个回调函数货值子进程的状态

const spawn = require('child_process').spawn;
const chalk = require("chalk");

let runInstall = async function(cwd,callback,executable = 'npm',args = ['install']){
    console.log(chalk.greenBright("正在安装项目依赖……\n"));
    // 执行executable args 对应到默认参数即 npm install 安装依赖
    await new Promise((resolve, reject) => {
        const installProcess = 
        spawn(executable, args, { cwd: cwd,stdio: "inherit", shell: true });
        //文件目录, 继承父进程的输入输出【即控制台可以看到子进程输出】,开启shell 
        installProcess.on('exit', () => {
            console.log(chalk.greenBright("依赖安装完成!"));
            resolve();
        });
        installProcess.on('error',(err)=>{
            console.log(chalk.red("依赖安装失败"));
            reject(err);
        })
    }).then(()=>{ callback(); })
    .catch((err)=> { console.log(chalk.red("出现错误"));console.log(err) });

}
复制代码

四、打包发布

--- main.js

--- utils

------ outputFunc

------ npmInstall

------ inquirerArr

增加了重名文件判断,再整体再进行一下结构优化,就可以准备发布啦!

配置更改

发布前要对package.json的配置进行更改

name: 主要是包名,必须唯一
version: 版本号,每次发布至 npm 需要修改版本号
description: 描述。
main: 入口文件,import/require的
keyword:关键字,以空格分离希望用户最终搜索的词。
author:作者
private:是否私有,需要修改为 false 才能发布到 npm
复制代码

发布

npm login 登录

npm publish packageName 发布

可能存在的问题

1.报错 Private mode enable, only admin can publish this module [no_perms] Private mode enable, only admin can publish this module: clitest
错误:403
这是因为我们设置了淘宝镜像,https://registry.npm.taobao.org/,将registry设置为原来的镜像
命令:npm config set registry=http://registry.npmjs.org

2. 报错If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).
清理下缓存:删除C:\Users\Administrator\下的.npmrc文件
然后再次登录
(还有一个原因可能是忘记登录了,捂脸QAQ)

3. 打包使用的时候,要将__dirname 替换为 process.cwd()

复制代码

发布成功后,就可以快乐的使用啦!

npm install -g simple-create-react 全局安装

simple-create-react init projectName 拉取模板进行初始化

如图:

五、总结

  1. 通过commander实现命令行的交互
  2. 通过download-git-repo实现仓库代码的拉取
  3. 通过inquirer实现配置的选择和相关项的填写,实现可选配置
  4. 通过handlebars实现对package.json模板的替换
  5. 通过chalk和ora对命令行的输出进行美化
  6. 通过child_process模块开启子进程,实现依赖的npm install

源码github.com/oniya24/sim…

参考:

关注下面的标签,发现更多相似文章
评论