从0开始,带你开发自己的web前端开发脚手架并发布到npm

随时前端的发展,在大团队下前端的规范性及开发便携性以及如何提升研发效能是前端开发的首要问题。

如何提升研发效能呢?
其实这种说法在大厂中比较常见。
一个部门下有若干个前端团队,如果每一个团队都有不同的项目组件库,项目框架,http请求方法,不同的埋点方法或者工具方法,那在后期如果要联动开发是很难的事情。
这时候就有了一个说法:前端开发脚手架!

它的优点不言而喻:
a **自动化:**项目重复代码拷贝/git操作/发布上线操作
b **标准化:**项目创建/git flow /发布流程/ 回滚流程
c **数据化:**研发过程系统化,数据化,使得研发过程可量化。

使用者的角度是如何看待前端脚手架呢?
它本质上是一个操作系统客户端,通过命令行执行。如:

vue createvue-test-app

它对于使用者就是一行命令,但是它可以做什么呢?它会帮助我们在本地创建一个vue项目,项目名为vue-test-app。实际上还有比这个场景更加复杂的命令。不过今天只是带大家入门。让大家看看,如果从0开始,在自己本地开发 一个前端脚手架并发布到npm 呢。

1. 首先在本地创建一个npm项目。
2. 在本地新建文件夹。vue-test
3. 创建好文件夹后,使用cmd进入该创建好的文件夹。
4. 使用npm init  全部Y 生成一个默认的package.json模板
	在package.json 中需要增加一个bin配置,声明这个bin的名称以及对应文件地址。

从0开始,带你开发自己的web前端开发脚手架并发布到npm_第1张图片

5. 在当前文件夹下新建一个文件夹目录bin目录。

从0开始,带你开发自己的web前端开发脚手架并发布到npm_第2张图片

6. 在新建的这个bin目录下新建一个index.js文件。
7. 编辑这个index.js 文件,在文件中添加 console.log("vue-test")
8. 并且在当前文件的首开始,添加一行      #!/usr/bin/env node

从0开始,带你开发自己的web前端开发脚手架并发布到npm_第3张图片
在这里插入图片描述

9. 将脚手架发布到npm(此处需要大家先行在npm进行注册。)
   使用npm login 进行npm登陆。
   然后使用 npm publish 发布 (此处报错,建议百度。一般都是名称问题)
10. 推送成功后,在自己电脑本地则可以使用
	npm install vue-test -g 进行安装

11. 安装完成后,则可以使用 vue-test (package.json 中bin配置的那个名称)来进行验证

以上就是一个最基础的前端本地开发脚手架以及发布到npm的一些列流程。
喜欢麻烦点个赞~~~ 后面会陆续出如何搭建一个脚手架提升研发效能。

你可能感兴趣的:(vue,前端,node,vue.js,node.js,javascript)