- 综合排序
- 最热优先
- 最新优先
- 来自专栏IMWeb前端团队
自制前端脚手架
前段时间因为需求使用了几款前端脚手架，包括yeoman、imweb-cli, 他们功能丰富 ，简单高效，其核心功能是根据用户选择的模板快速的新建一个完整的项目，也可以在其中做一些自定义的配置。 学会了使用架手架，便想了解脚手架到底是怎么工作的， 阅读了相关脚手架的源码后，对原理有了一点心得。 想了解的同学可以访问(https://www.npmjs.com/package/imweb-cli) 脚手架目录结构 了解了脚手架基本原理后，我们来尝试自己制作一款脚手架。 首先要明白脚手架的核心是模板，什么是模板呢？ 模板就是包含一个项目完整信息的目录结构。 脚手架提供了对模板增、删、改、查的功能及初始化项目必要的能力。 运行 npm link 将脚手架挂在到全局 ， 此时可以在命令行调试新建的脚手架框架了。 在任意目录下运行命令struct -h, 可以看到刚完成的脚手架命令可以在全局生效了。
70630发布于 2019-12-03 - 来自专栏IMWeb前端团队
自制前端脚手架
前段时间因为需求使用了几款前端脚手架，包括yeoman、imweb-cli, 他们功能丰富 ，简单高效，其核心功能是根据用户选择的模板快速的新建一个完整的项目，也可以在其中做一些自定义的配置。 学会了使用架手架，便想了解脚手架到底是怎么工作的， 阅读了相关脚手架的源码后，对原理有了一点心得。 想了解的同学可以访问(https://www.npmjs.com/package/imweb-cli) 脚手架目录结构 了解了脚手架基本原理后，我们来尝试自己制作一款脚手架。 首先要明白脚手架的核心是模板，什么是模板呢？ 模板就是包含一个项目完整信息的目录结构。 脚手架提供了对模板增、删、改、查的功能及初始化项目必要的能力。 运行 npm link 将脚手架挂在到全局 ， 此时可以在命令行调试新建的脚手架框架了。 在任意目录下运行命令struct -h, 可以看到刚完成的脚手架命令可以在全局生效了。
1.6K80发布于 2017-12-29 - 来自专栏学习/读书笔记
《前端工程化》-- 2. 脚手架3. 构建
2.2 脚手架在前端工程中的角色和特征 不同于Java、Android等存在固定模式和技术选型的项目，前端项目的资源类型多样、技术选型宽泛、工作流程无固定规范等一系列特征造成前端脚手架与Eclipse脚手架相比存在一定的差异性和独特性 业务开发人员需要了解的应该仅仅是如何配置、如何使用，这便是脚手架工具要解决的最切实的问题： 1）快速生成配置； 2）降低框架学习成本； 3）令业务开发人员关注业务逻辑本身。 2.2.2 局限于本地的执行环境 前端工程化的3个阶段：本地工具链、云管理平台和持续集成。三者最明显的外在差异在于，对各个功能模块执行环境的划分。 2.2.3 多样性的实现模式 前端项目类型、资源的多样性以及各团队对前端工程师定位的不同造成前端脚手架没有固定的实现模式。不论具体实现模式如何，优秀的脚手架工具遵循的原则是一致的。 整体流程如图： 3. 构建 3.1 构建功能解决的问题 构建，或者叫作编译，在前端工程体系中的角色是将源代码转化为宿主浏览器可执行的代码，其核心是资源的管理。
1.6K20编辑于 2022-04-07 - 来自专栏VTeam技术团队
前端脚手架开发入门
为什么需要脚手架 脚手架本质上是一个工具，使用脚手架的目的就是摆脱构建工程时重复性的工作，尤其是当一个工程具有一定通用性时，工程脚手架的意义就更为突出。 进行下一步之前，让我们下来回顾一下vue-cli脚手架是怎么使用的。 ? 可以看出来，脚手架会提供一个问答交互的方式，让使用者输入或选择参数，然后根据获取的参数做出相应的动作(action)。 STEP3: 交互式脚手架的另一个特点是灵活，使用者可以根据自己的需求，可以清晰的去选择让脚手架做什么，不做什么。 这和我们使用其他脚手架的体验是一样的。 本篇文章阐述的方法只实现了基础功能，好的脚手架还可以做更多，如集成单元测试，第三方库的选择安装，项目打包发布等。更多符合项目特点的脚手架还需要根据实际项目去开发。
1K30发布于 2020-12-14 - 来自专栏前后两端不设限
前端脚手架构建实践
前面的话 在前端工程化过程中，为了解决多项目中，相似度高的工作，便诞生许多前端脚手架，这里记录下自己实现一个简易前端脚手架过程的实践。 NodeJs的路径操作库，如合并路径 chalk 命令行输出样式美化 具体实现 首先在一个新的文件夹，如xxx-tools下 npm init 创建一个node项目，因为是要做成一个npm包的脚手架 /bin/tempTool" }, 到目前为止，一个简单的前端脚手架实现了，在npm官网注册，在项目里执行npm login登录，之后npm publish如果一切顺利，npm包提交完毕，可以在其它项目中执行 npm i -g xxx-tools，安装这个包，执行xxx-tools命令，输出 Hello World，脚手架开发过程中，也涉及到在本地调试，可以直执行node . name}}; 最终输出到 dist 目录的文件，会替换其中双括号里的内容 结束的话 这里只是简单的例子，可以沉淀一些业务场景的模板，通过命令行的方式快速的创建，避免复制粘贴，其实本意是学习一下Node的脚手架工具的实现
1.3K30编辑于 2022-12-24 - 来自专栏跟牛老师一起学WEBGIS
前端脚手架开发指南
概述 脚手架本质上是一个工具，使用脚手架的目的就是摆脱构建工程时重复性的工作，尤其是当一个工程具有一定通用性时，工程脚手架的意义就更为突出。它可以让我们只需要一行命令，就可以初始化好一项工程。 download-git-repo inquirer ora spinner npm i chalk commander download-git-repo inquirer ora spinner -S 3. 实现脚手架 在根目录下创建文件index.js，并修改package.json文件内容： { ..., "bin": { "lzugis-cli": "index.js" } } 文件 调试 通过命令npm link连接脚本，调试脚手架，如下图所示： 5. 测试 先全局安装脚手架npm i sfmap-cli -g，再通过命令sfmap-cli create创建工程。
98920编辑于 2023-02-27 - 来自专栏前端Q
开发前端 CLI 脚手架思路解析
为什么要自己搞脚手架 在实际的开发过程中，我们经常用别人开发的脚手架，以节约搭建项目的时间。 但是，当 npm 没有自己中意的脚手架时，我们不得不自己动手，此时学会开发前端 CLI 脚手架的技能就显得非常重要。搭建一个符合大众化的脚手架能使自己在项目经验上加个分哦！ 入门需知 下面我们以创建 js 插件项目的脚手架来加深我们对前端脚手架的认知。 在此之前，我们先把需要用到的依赖库熟悉一下（点击对应库名跳转到对应文档）： chalk[1] （控制台字符样式） commander[2] （实现 NodeJS 命令行） download[3] （实现文件远程下载 /package/chalk [2]commander: https://www.npmjs.com/package/commander [3]download: https://www.npmjs.com
1.1K11编辑于 2021-12-17 - 来自专栏前端魔法指南
前端工程化之脚手架( ? )
阅读了我上一篇文章，就可以感受到环境配置对于前端有多么痛苦 那我今天的想法呢，就是紧赶着搭一个自己的脚手架出来，别整得我每次搭建项目都心态爆炸 那么按照网上的教程来说，还是蛮简单的 基本流程 基本设置 这个大坑可能常伴你左右（网上有说在cli.js第一行添加某些玩意儿就行，但是我这里没有效果） 正确的做法是 修改默认打开方式为node 正式开始 首先明确一下我们的目标，我希望完成一个简单的但是有一定拓展性的脚手架 )) // 参数2: 创建位置 } 于是当我们选定tsx&&react&&sass会启动下载 （这里失败了，下载git这一部分我还在考虑是否通过下载模板的方式完成） 问题 只是下载git的话我需要脚手架么
72810编辑于 2022-08-01 - 来自专栏centosDai
前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）
上一篇文章《前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）》介绍了什么是脚手架，以及Vue-cli 2.x如何创建项目，创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目？ 一、Vue-cli 2 与 Vue-cli 3的区别 vue-cli 3 是基于 webpack 4 打造的，vue-cli 2 还是 webpack 3。 vue-cli 3 的设计原则是 “0配置”，移除 build 和 config 等配置目录。 vue-cli 3 提供了 vue ui 命令，提供可视化配置，更加人性化。 运行命令如下图： 方框内提示我们发现有可用新版本脚手架，可以运行下边命令进行更新。 紧接着需要配置键值，下次我们可以通过键值就能看到，比如设置一个前端人的简写：qdr。回车之后项目就开始创建了。 2.5、如何查看之前保存的配置选项，如果不需要了我们如何删除呢？
85320编辑于 2021-12-01 - 来自专栏centosDai
前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）
一、脚手架认识和使用前提 CLI 是什么意思？ CLI -- Command-Line Interface 命令行界面，俗称脚手架。 脚手架就是一个大概的框架，是建筑学上的一个概念。 Vue-cli 是官方发布 vue.js 项目脚手架，使用 Vue-cli 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。 1.2、使用脚手架的前提有哪些？ 使用命令进行安装 npm install webpack -g //全局安装 npm install webpack --save //当前目录安装 3、安装脚手架 npm install @vue-cli 二、Vue CLI 2.x 初始化项目 vue-cli 3 已经发布一段时间了，现在安装脚手架，都会安装 Vue-cli 3.x 版本，如果我们想要使用 vue-cli 2.x 版本时，需要拉去 vue-cli render: h => h(App) 下篇文章 -- 介绍 vue-cli 3.x 搭建项目
1K30编辑于 2021-12-01 - 来自专栏CY
Vue3CLI（脚手架）
Node.js 中文网 (nodejs.cn) 2、创建初始化管理配置文件：package.json //1、需要输入一些信息（一路回车） npm init //2、全部默认 npm init --yes 3、 } // 解构 let {username} = user console.log(username)//---小明 // 数组解构 let [a,b,c] = [1,2,3] let [...d] = [1,2,3,4] console.log(a)//---1 console.log(d)//---[ 1, 2, 3, 4 ] 2、模块化 设置模块化工程package.json中添加"type" ) },1000) }).catch(err =>{ console.log(err) }) ---- 三、Vue3CLI(脚手架) 1、安装 //npm npm install -g @vue/cli //yarn yarn global add @vue/cli //测试 vue --version 2、创建项目 vue create hello-world //选择vue3 //
46800编辑于 2023-05-06 - 来自专栏吴文周的专栏
前端-团队效率-node脚手架进程守护
文件配置需要监听变化的文件或者目录 例如在 .ngplimit 文件写入vue.config.js 下载全局命令，执行npg run xx 替换用npm run xx 需求背景 node项目中越来越多的脚手架命令 修改脚手架配置文件，或者中间层服务时可以热跟新不需要重启服务 配置化，无缝命令切换 解决方案 监听配置文件中的文件以及文件目录，如果发生变化重启服务 新增同质化的系统命令 核心技术模块 chokidar
51300发布于 2020-01-30 - 来自专栏吴文周的专栏
前端-团队效率-node脚手架进程守护
文件配置需要监听变化的文件或者目录 例如在 .ngplimit 文件写入vue.config.js 下载全局命令，执行npg run xx 替换用npm run xx 需求背景 node项目中越来越多的脚手架命令 修改脚手架配置文件，或者中间层服务时可以热跟新不需要重启服务 配置化，无缝命令切换 解决方案 监听配置文件中的文件以及文件目录，如果发生变化重启服务 新增同质化的系统命令 核心技术模块 chokidar
40830发布于 2020-02-19 从0到1搭建Spring Boot 开发脚手架之前端模块(vue3)
项目大家到现在肯定有人注意到了前端模块scaffold-admin-ui，但是这个项目是如何搭建的，代码内容现在还没有展示，现在就把admin-ui 这个模块的搭建过程及代码结构整体展示一下，便于直接复制应用 前端模块 scaffold-admin-ui 搭建详细步骤 1. 搭建思想 技术选型： 框架：Vue3（Composition API） + TypeScript（可选）。 搭建步骤 2.1 初始化项目 # 使用Vite创建Vue3项目 npm create vite@latest scaffold-admin-ui -- --template vue cd scaffold-admin-ui window.location.href = '/login' } return Promise.reject(error) } ) export default service (3) /list') } export const deleteUser = (id: number) => { return request.delete(`/api/user/${id}`) } 3.
44610编辑于 2025-10-14- 来自专栏源码揭秘
前端工程化-打造企业通用脚手架
add material核心流程 · 核心代码实现 · 小结 通用能力 总结 前言 随着前端工程化的概念越来越深入FEer心，前端开发过程的技术选型、代码规范、构建发布等流程的规范化、标准化是需要工具来保驾护航的 脚手架则可作为工程化的辅助工具，从很大程度上为前端研发提效。 脚手架是什么？ 那脚手架是什么呢？ 脚手架核心价值 综上，前端脚手架存在意义重大。脚手架的核心目标是提升前端研发整个流程的效能。 自动化。避免项目重复代码拷贝删改的场景；将项目周期内的Git操作自动化。 标准化。 通用能力 上述从focus create projectName和focus add material的使用和核心实现阐述了脚手架@focus/cli在前端研发过程的所起到提效作用。 比如说实现通过脚手架新建脚手架？通过脚手架新建一切物料？ 总结 ❝上述代码存放在仓库@careteen/cli。 脚手架的核心目标是提升前端研发整个流程的效能。
1.1K20编辑于 2022-02-14 - 来自专栏Derry Blog
从0开始搭建优雅的前端脚手架工具
前言在日常开发中，我们经常会使用到各种脚手架工具(cli): vue-create-app,ng 包括 npm。它们极大简化了开发人员对于项目结构和文件创建的工作，让我们可以把精力专心在业务实现上。 ;process.exit();现在我们的脚手架工具已经搭建好了，大家可以一起来尝试下了！全部源码d-cli
88230编辑于 2022-12-05 - 来自专栏全栈程序员必看
httprunner（3）用脚手架快速搭建项目
我们可以使用脚手架，脚手架就是自动地创建一些目录，形成一个项目的架构，不需要我们再手动的去创建 查看创建新项目的命令 先来查看一下帮助命令 httprunner startproject -h (httprunner_env ├── har ├── reports └── testcases ├── demo_testcase_ref.yml └── demo_testcase_request.yml 3 ├── har ├── reports └── testcases ├── demo_testcase_ref.yml └── demo_testcase_request.yml 3 : /Users/jkc/hrun/hrun_demo 2021-02-03 13:33:58.342 | INFO | httprunner.compat:ensure_testcase_v3: testcases/demo_testcase_ref.yml 2021-02-03 13:33:58.364 | INFO | httprunner.compat:ensure_testcase_v3:
56120编辑于 2022-09-16 - 来自专栏JavaScript高级程序设计
前端脚手架开发需要了解哪些技术点
因为最近团队里在做一个基于Vue的脚手架，刚好自己也对这个东西尝试过，所以刚好聊一下这个问题。 简单来说脚手架其实是一个项目框架，它的作用是快速对项目进行初始化。 开发脚手架的基本思路 开发脚手架的思路很简单。 第一：先写好项目的模板，放到远程git仓库上。 第二：通过命令行执行初始化项目命令。 开发脚手架需要了解哪些npm包 chalk 命令行着色工具 huskey git提交检测工具 int-staged 代码格式化。这个通常跟huskey配合使用。 开发脚手架需要了解哪些node模块儿 如果真的要自己开发一套脚手架,那么对于node的一些常用模块儿也必须非常熟悉。 在开发脚手架之前我们需要对具体的业务非常熟悉，知道每个细节。 如果自己的技术积累足够的话，开发脚手架是没有问题的。 javascript基础知识总结
66720编辑于 2022-07-14 - 来自专栏柒八九技术收纳盒
Rust 赋能前端-开发一款属于你的前端脚手架
所以，有一个一键创建项目，并且能够拥有上面所有特性的脚手架能够省去多少时间。 这也是，我们写这篇文章的初衷，通过学习这篇文章，我们能够快速构建一个功能完备的前端项目。 ❞ 何为脚手架 关于脚手架，我们在前端工程化之概念介绍中有过解释，我们就拿来主义了。 ❝脚手架作为一种创建项目「初始文件」的工具被广泛地应用于「新项目」或者「迭代初始阶段」 ❞ 使用工具替代人工操作能够避免人为失误引起的低级错误，同时结合整体前端工程化方案，快速生成功能「模块配置」、「自动安装依赖 脚手架模板 在实际开发中，我们可以通过创建脚手架对应的模板对项目进行「定制化处理」。 定制化模板可以「弥补」官方提供基础工具集不满足特定需求的场景。 「功能和本质」 功能是「创建项目初始文件」 本质是「方案的封装」 ❞ 之前，我们在前端工程化之概念介绍中写过基于create-react-app的脚手架方案，如果有小伙伴的公司还是用CRA进行项目初始化
1.1K20编辑于 2024-01-11 - 来自专栏六个周
Week3-脚手架核心流程开发
ES Module 主要内容 脚手架需求分析和架构设计 脚手架模块拆分策略和core模块技术方案 脚手架执行准备过程实现 脚手架命令注册实现(基于commander) 加餐 Node项目如何支持ES Module 第二章：脚手架整体架构设计 2-1 大厂是如何做项目的 2-2 前端研发过程中的痛点和需求分析 2-3 加餐：大厂的git操作规范是怎样的？ 2-4 高端操作：脚手架架构设计+绘制架构图 / 2-5 架构设计图绘图技巧分享 第三章 脚手架模块拆分策略和core模块技术方案 3-1 脚手架模块拆分策略 核心流程：core 命令： ** 第五章：脚手架命令注册实现(基于commander） 5-1 快速实现一个commander脚手架 ｜ 5-2 commander脚手架全局配置 之前在学习命令注册的时候，使用的是yrags，本节使用另一个库 liugezhou-test -d // true 5-3 commander脚手架命令注册的两种方法 课程所讲内容：commander命令注册有两种方式： comman API注册命令 addCommand
1.2K30编辑于 2022-10-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号