从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的一些列流程。

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

相关文章
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
106 3
|
19天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
64 3
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
114 2
13 个 NPM 快速开发技巧
摘要: 玩转npm。 作者:前端小智 原文:13 个 npm 快速开发技巧 Fundebug经授权转载,版权归原作者所有。 为了保证的可读性,本文采用意译而非直译。 每天,数以百万计的开发人员使用 npm 或 yarn 来构建项目。
856 0
|
3月前
|
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
143 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    30
  • 3
    详解智能编码在前端研发的创新应用
    15
  • 4
    智能编码在前端研发的创新应用
    16
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
    31
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    22
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    12
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    13
  • 10
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    19
  • 推荐镜像

    更多
    AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等