「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）
一 前言
读完这篇文章你可能会学到哪些知识？
①node实现终端命令行 ②终端命令行交互③深copy整个文件夹 ④nodejs执行终端命令 如 npm install⑤建立子进程通信
⑥webpack底层操作，启动webpack,合并配置项⑦编写一个plugin,理解各阶段⑧require.context实现前端自动化
1 实现效果展示
项目效果
mycli creat 创建项目
mycli start 运行项目
mycli build 打包项目
体验步骤
我们在这边文章里面用的是mycli ，但是我并没有上传项目到npm,但是这篇文章的技术是笔者之前的一个脚手架原型，感兴趣的同学本地下载可以体验效果。
全局下载脚手架rux-cli
windows
npm install rux-cli -g
mac
sodu npm install rux-cli -g
一条命令创建项目，安装依赖，编译项目，运行项目。
rux create
2 设置目标
设置目标，分解目标
我们希望用一条命令行,实现项目创建，依赖下载,项目运行，依赖收集等众多流程。如果一口气设计整个功能，可能会感到脑袋一片空白，所以我们要学会分解目标。实际纵览整个流程，主要分为 创建文件阶段 ， 构建，集成webpack阶段 ， 运行项目阶段 。梳理每个阶段我们需要做的事情。
二 创建文件阶段
1 终端命令行交互
① node 修改 bin
我们期望像vue-cli那样 ，通过自定义的命令行vue create，开始创建一个项目，首先能够让程序终端识别我们的自定义指令，我们首先需要修改bin。
例子：
mycli create
我们希望的终端能够识别mycli ,然后通过 mycli create创建一个项目。实际上流程大致是这样的通过mycli可以指向性执行指定的node文件。接下来我们一起分析一下具体步骤。
执行终端命令号，期望结果是执行当前的node文件。
建立工程
如上图所示我们在终端执行命令行的时候，统一走bin文件夹下面的 mycli.js文件。
mycli.js文件
#!/usr/bin/env node
'use strict';
console.log('hello,world')
然后在package.json中声明一下bin。
{"name": "my-cli","version": "0.0.1","description": "","main": "index.js","bin": {"mycli": "./bin/mycli.js"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "
「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）相关推荐
- 「前端工程化」该怎么理解？
大家好,我是若川.今天分享一篇「前端工程化」的好文.非广告,请放心阅读.可点击下方卡片关注我,或者查看系列文章.今天发文比较晚,以往都是定时早上7:30发文,也不知道是不是有点早. 一.什么是前端工程 ...
- 基于hexo和aws云搭建个人博客，0基础0费用，有点豪横（2W字超详细图文教程）
这是篇概述文章,详细参考Hexo建站专栏 最近几个月一直在整理之前的技术笔记,目前虽在体系上还尚有欠缺,但内容方面整理的七七八八了,这些内容一部分记录在了云笔记中另一部分记录在了博客上.于是决定搭建一 ...
- GitHub+hexo搭建个人博客（2019新版超详细教程）
GitHub+hexo搭建个人博客详细教程 原文链接 : GitHub+hexo搭建个人博客详细教程 前言 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交信息分享者,随之优秀的信息分享平台也越来 ...
- 「鸡尾酒排序」不会？每天一遍，排序再见【超详细】
- yum安装zabbix5.0并配置grafana模板【2W字超详细】
大家好,我是早九晚十二,目前是做运维相关的工作.写博客是为了积累,希望大家一起进步! 我的主页:早九晚十二 文章目录 yum安装基础组件 安装软件包 启动mariadb 登录数据库创建账号 导入数据 ...
- dreamweaver 正则表达式为属性值加上双引号_「前端篇」不再为正则烦恼
作者:李一二 转发链接:https://mp.weixin.qq.com/s/PmzEbyFQ8FynIlXuUL0H-g 前言 有不少朋友都为写正则而头疼,不过笔者早已不为正则而烦恼了.本文分享一些 ...
- Serverless ：让「前端开发者」走向「应用研发者」
技术的成熟度源自大规模的实践,在 Java 领域,阿里将自身的实践源源不断的反哺给微服务技术体系:在 Node.js 领域,阿里正掀起了前所未有的前端革命浪潮,将实践反哺给 Serverless 技 ...
- 「前端-HTML」 HTML-表格-表单-第二篇
前端-HTML-第二篇 这是HTML第二篇,共三篇,如需看其他篇请点击跳转 目录 前端-HTML-第二篇 HTML 列表 1.无序列表 2.有序列表 3.自定义列表 其他 pre标签 HTML实体 H ...
- 「前端开发者」如何把握住「微信小程序」这波红利？
由于前两周一直在老家处理重要事情,虽然朋友圈被「微信小程序」刷爆了,但并没有时间深入了解. 昨天回广州之后,第一件事情就是把「微信小程序」相关的文章.开发文档.设计规范全部看了一遍,基本上明白了「微信 ...
最新文章
- php 获取class id,CSS Class 與 CSS ID
- 关于关闭浏览器Session就丢失的讨论
- mysql查询结果导出excel_Mysql查询结果导出为Excel的几种方法
- JavaScript substr() 方法
- python双除_python2和python3 中的除法的区别
- android 获取应用列表,获取全部应用列表
- 1052. Linked List Sorting
- 表分析oracle的作用,Oracle中分析表的作用
- C++ vector 内存分配与回收机制
- python自动化之控制浏览器
- 技术美术面试问题总结——数字天空
- oracle自动化巡检报告
- gerrit is not registered in your account, and you lack ‘forge author‘ permission.
- 项目实践--广告排期系统
- 欧洲语言框架A1到C2,开言英语怎么样，学习过一段时间的效果评价
- 使用Arduino和HCSR04超声波传感器进行简单的超声波悬浮
- 珍惜人生路上的点点滴滴
- 【小组作业】电影院管理系统
- echarts折线图动态修改折线颜色
- 信奥一本通 1396：病毒(virus)
热门文章