闽侯县住房和城乡建设网站,网站制作+app+公众号,网站建设负责人证明,西安百度公司电话NodeJs的出现#xff0c;让前端工程化的理念不断深入#xff0c;正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具#xff0c;随后又出现了vue-cli和create-react-app等完善的脚手架#xff0c;提供了完整的项目架构#xff0c;让我们可以更多的关注业务#… NodeJs的出现让前端工程化的理念不断深入正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具随后又出现了vue-cli和create-react-app等完善的脚手架提供了完整的项目架构让我们可以更多的关注业务而不必在项目基础设施上花费大量时间。平时我们都只专注在业务上的开发拿起一套开箱即用的模板项目就直接干。但是这些现成的脚手架未必就能满足我们的业务需求也未必是最佳实践这时我们就可以自己开发一个脚手架那么我们使用的脚手架里面到底做了什么如何自己搭建脚手架呢脚手架代码github地址https://github.com/hourong88/portal-cli点击文章末尾【阅读原文】即可访问以下为正文文章结构提问1.脚手架需要实现什么初始化项目模版能力。2.脚手架需要什么功能问询功能下载模版(模版与脚手架分离互不影响)写入模版优化(git初始化安装依赖等)3.用什么工具实现commander.js 命令行工具chalk 命令行输出样式美化Inquirer.js 命令行交互当然还有download-git-repo git仓库代码下载ora 命令行加载中效果等优化依赖工具都可以在此基础上进行丰富。以下分为两步完成本地创建cli脚手架并测试 发布脚手架我们正常的流程是创建本地脚手架绑定git仓库发布包从易到难我们反过来本文先讲怎么发一个最简单的npm包然后把脚手架搭好了走一遍发包流程就OK了。一、发布npm包本地创建项目首先我们需要创建一个项目这里就叫portal-cli, 项目结构如下- commands // 此文件夹用于放置自定义命令- utils- index.js // 项目入口- readme.md为了测试我们先在index.js放点内容#!/usr/bin/env node// 必须在文件头添加如上内容指定运行环境为nodeconsole.log(hello cli);对于一般的nodejs项目我们直接使用node index.js就可以了但是这里是脚手架肯定不能这样。我们需要把项目发布到npm用户进行全局安装然后就可以直接使用我们自定义的命令类似portal-cli这样。所以我们需要将我们的项目做下改动首先在package.json中添加如下内容 bin: { portal-cli: index.js },这样就可以将portal-cli定义为一个命令了但此时仅仅只能在项目中使用还不能作为全局命令使用这里我们需要使用npm link将其链接到全局命令执行成功后在你的全局node_modules目录下可以找到相应文件。然后输入命令测试一下如果出现如下内容说明第一步已经成功一大半了annaannadeMacBook-Air job % portal-cli hello cli*如果全局有bin相同名字的会报错需要把package.json里面bin起的名字修改一下发布npm包注意事项npm官网注册一个npm账户已有账户的可以跳过这一步使用npm login登录需要输入username、password、emailnpm whoami 检查自己是否成功登陆npm link本地调试,上面已经调试的跳过这一步使用npm publish发布每次发布npm包都要修改版本号//npm publish报错npm notice integrity: sha512-Jkfy0M/VyAkQb[...]B9Ifdw2hF2CGQnpm notice total files: 7 npm notice npm ERR! code E403npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/portal-portal-cli-hourong - Forbiddennpm ERR! 403 In most cases, you or one of your dependencies are requestingnpm ERR! 403 a package version that is forbidden by your security policy.我发布包的时候调整了几次报错不是403就是404那个捉急。下面总结了几个报错检查清单检查npm包的名字跟已有的包名是否重复要么就改个名字或者加后缀如果用的是cnpm源要改成npm方法见下面说明registry如果还是报403你的账号看是不是刚刚注册的如果是的话需要进入你的邮箱验证一下邮箱。版本号是否更新如果以上3步修改了还是报403错误就连接手机4g热点再发布一下。一般发布不了按照以上5点进行检查可以解决。检查第2步npm源的方法查看本地当前使用的源registry npm config get registry切换源registry npm config set registry 临时切换registry npm publish --registry 设置完以后再次查看当前源是否是http://registry.npmjs.org注意国内目前发布组件时必须切换为npmjs否则npm publish也不会成功**************科普npm registry简单来说npm registry就相当于一个包注册管理中心。它管理着全世界的开发者们发布上来的各种插件同时开发者们可以通过npm install的方式安装所需要的插件。npm官方registry为http://registry.npmjs.org/国内速度较快的为https://registry.npm.taobao.org/**************以上涉及到的关键命令npm link // 本地调试npm publish // 发布npm whoami //查看当前登陆的用户名每次更新包需要同步更新版本号发布的包需要发布72小时以后才可以废弃删除。二、本地脚手架搭建上文中我们既然是搭建脚手架肯定不能只让它输出一段文字吧我们还需要定义一些命令用户在命令行输入这些命令和参数脚手架会做出对应的操作。这里不需要我们自己去解析这些输入的命令和参数有现成的轮子commander可以使用完全可以满足我们的需要。安装commandernpm install chalk commander download-git-repo inquirer ora --save创建目录 bin/index.jspackage.json 里面bin改为 bin: { portal-cli: bin/index.js },当然目录结构你可以随意定义package.json里面bin从哪里起主要文件就放哪儿。创建commander init命令#!/usr/bin/env nodeconst fs require(fs);const path require(path);const chalk require(chalk); //命令行输出样式美化const commander require(commander); //命令行工具const inquirer require(inquirer); //命令行交互const checkDire require(./utils/checkDire.js);const { exec } require(child_process);const { version } require(../package.json);const { promptTypeList } require(./config);function resolve(dir) { return path.join(__dirname,..,dir);}//version 版本号commander.version(version, -v, --version) .command(init ) .alias(i) .description(输入项目名称初始化项目模版) .action(async (projectName,cmd) { await checkDire(path.join(process.cwd(),projectName),projectName); // 检测创建项目文件夹是否存在 inquirer.prompt(promptTypeList).then(result { //inquirer 交互问答 const {url, gitName, val} result.type; console.log(您选择的模版类型信息如下 val); console.log(项目初始化拷贝获取中...); if(!url){ console.log(chalk.red(${val} 该类型暂不支持...)); process.exit(1); } exec(git clone url, function (error, stdout, stderr) { //git仓库代码下载 if (error ! null) { console.log(chalk.red( clone fail,${error} )); return; } fs.rename(gitName, projectName, (err){ if (err) { exec(rm -rf gitName, function (err, out) {}); console.log(chalk.red(The ${projectName} project template already exist)); } else { console.log(chalk.green(✔ The ${projectName} project template successfully create(项目模版创建成功))); } }); }); }) });commander.parse(process.argv);以上代码解析1). checkDire检查创建项目文件夹是否存在const fs require(fs);const chalk require(chalk);const path require(path);module.exports function (dir,name) { let isExists fs.existsSync(dir); if (isExists) { console.log(chalk.red( The ${name} project already exists in directory. Please try to use another projectName )); process.exit(1); //存在则跳出 }};2). commander init 命令行进入交互问答 3). 交互问答用inquirer命令交互工具question 数组为交互命令配置数组中每一个对象都对应一个执行命令时候的一个问题type为该提问的类型name为该问题的名字可以在后面通过name拿到该问题的用户输入答案message为问题的提示default则为用户没输入时的默认为其提供一个答案validate方法可以校验用户输入的内容返回true时校验通过若不正确可以返回对应的字符串提示文案transformer为用户输入问题答案后将对应的答案展示到问题位置需要有返回值返回到字符串为展示内容具体使用文档https://github.com/SBoudrias/Inquirer.js4). 问答结束的回调prompt方法中then里的参数是一个对象从配置里面拉取git仓库代码。后面你们使用的时候拉不下来看不是不是没有仓库代码权限。module.exports { npmUrl: https://registry.npmjs.org/xxx-cli, promptTypeList:[{ type: list, message: 请选择拉取的模版类型:, name: type, choices: [{ name: portal前端框架, value: { url: http://192.168.3.51/xxx/portal-frame.git, //框架git仓库 gitName: portal-frame, val:portal前端框架 } }] }],};5).git clone下载前端框架。也可以用download-git-repo git仓库代码下载以上就是全部前端脚手架内容总共四个文件index.js是最重要的(引用另外两个配置文件)加上一个package.json。执行以下命令发布npm link // 本地调试npm publish // 发布三、如何使用在需要用到框架的时候新建空文件夹执行npm install portal-cli -g //全局安装portal-cliportal-cli init //portal-cli init test test就是你放文件夹的名称可以自己定义这样前端脚手架生成模版命令工具就完成了。如果想更个性化可以把npm包完善一下包括包的版本说明readme丰富脚手架交互问询内容美化操作提示等。结语node.js本质还是jsjs熟悉以后结合node依赖和语法各种试错调试需要耐心和细心。另外开始做一个实例的时候构思思路注意流转顺序。主要以官方文档为主网上博客文章为辅。官方的还是靠谱一点博客各种坑不是过时了就是讲的不连贯没有可执行性。总的来说学习也是一个探索的过程共同进步以上【完】参考https://www.cnblogs.com/cangqinglang/p/11225166.htmlhttps://segmentfault.com/a/1190000021390776Inquirer.jshttps://github.com/SBoudrias/Inquirer.jsnpm包生命周期https://segmentfault.com/a/1190000017461666
