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

简介: 从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的名称以及对应文件地址。

20210409131444382.png

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

2021040913085049.png


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

20210409130926313.png

20210409131047847.png


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


以上就是一个最基础的前端本地开发脚手架以及发布到npm的一些列流程。

喜欢麻烦点个赞~~~ 后面会陆续出如何搭建一个脚手架提升研发效能。

目录
相关文章
|
13天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
27 3
|
10天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
14天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
29 3
|
14天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
16 3
|
14天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
32 2
|
15天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
15 2
|
25天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
15天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
32 0
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
119 2
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
36 0

推荐镜像

更多