就你叫脚手架啊
自说自话环节
要自己说,最近的状态就是一边学习使用各种工作会用的工具库;一边又在弥补自己对因为从js、html、css(大三接触认识😢)蹦到各种工程化项目(也基本在同时)而忽略的前端在各种规范到实际应用的发展过程及伴随产物的认识和理解。 对技术/工具的学习态度也早已经从当初一心闷头学,学完再说,变成用啥学啥,面向产出学习了属于是。 然后,最近一直在摸索组内脚手架相关的,然后又回想起大三误打误撞加入的一个校友前辈的创业团队,前端基础没咋会就直接上来拿到一个RN项目时的那种无知无助畏惧感,所以后来看到胡适的,“怕什么真理无穷,进一寸有一寸的欢喜”,给我很大感触。好了要开始进一寸了,哈哈哈哈。
What
首先我打算先说说 脚手架,截图分别是百度百科跟维基百科上对脚手架一词的解释,
再加上我自己臆想的理解,对应到前端项目这里来说,我愿把哪些已经为了实现各种功能/兼容而配置完成的,可以拿来直接添加业务代码模板项目称之为脚手架,它应该是当前需要下的一个最小可运行状态;而脚手架工具就是对应可以通过CLI(现在比较通用的方式)来生成通用(Yeoman)/定制(React -> create-react-app、Vue -> vue-cli、Angular -> Angular-cli)脚手架的工具
Why
那话要这么说,问题就又来了,你前端目的不就是用俩标签,把数据beautify一下放到浏览器显示上,Html、Css各安排一个文件不就完事儿了。不过也确实是这样,至少在Node.js出现之前只能是这样,但是有了node一切都不一样了,时代开始变了,JS可以不依赖浏览器运行了,然后前端也要模块化,就有了AMD、CMD、ES模块化规范等;CSS写起来也很不程序员,就有了Sass、Less预处理器,借助于Npm,我们可以借助形形色色的轮子来辅助开发,就是这样前端也可以文件夹嵌套起来了,但是再华丽胡哨,浏览器要渲染页面还是需要HTML跟CSS的,还是需要处理回去,然后就有了Browserify,来把你依赖的轮子bunding up,还是不够,如果能自动执行合并、压缩、检查甚至监听文件变化自动刷新等任务那不是更好,然后Gulp、Grunt以及现在广泛使用的webpack等打包构建工具就来了,然后现在再回头看,脚手架就显得必要了,毕竟没人愿意每次开发前去把那些配置鼓捣上半天,并且项目结构可以很清晰,降低合作沟通成本。这里放一篇挺有意思的文章,开头的那张图也是那里拿的,我个人非常喜欢类似这种发展史的东西,最近也打算买下《JavaScript二十年》来看看的,我要是刚入门的时候能看过这篇就好了😮💨。
How
这里主要说说通常项目里有的一些配置文件,他们通常无关业务功能
下面👇是使用reatct的脚手架create-react-app生成的脚手架目录
以及使用Vue的vue-cli生成的脚手架目录
相比后者,React的脚手架貌似更加简洁更加强迫症患者感到舒适,他们是这么说的
打开package.json文件,可以发现
有一条叫eject的单向command,运行script就可以将隐藏的配置eject出来,完全由自己来维护配置,就像是解除自动驾驶的感觉,哈哈哈。但整体来看的话,还是大同小异的。
node_modules
通常拿到项目后第一件事都是先npm i一把,这个时候
(还同时说明了package-lock文件的用处)
会把依赖下载到node_modules文件夹中,并且会解析依赖包,将其中的
提取到node_modules下/.bin子目录中,打开可以看到
通过#!/usr/bin/env node指定为node可执行脚本,
之后通过执行package.json中的npm run xxx时,会新建shell,并且将/node_modules/.bin添加到PATH下,因此找到xxx并执行,而不需全局安装此包。
jsconfig.json/tsconfig.json
大概意思就是可以通过根目录中的这个文件来配置在JS项目中要使用Java Script Service提供的哪些服务,好处就是会对代码进行智能分析,有效辅助开发。
vue.config.js
同上一个类似,它用来配置你需要使用vue-cli-service(它就是对基于 webpack-dev-server以及其他一些打包常用的功能做了处理,提供配置项的方式来修改功能)提供的哪些服务,基于vue-cli的项目都会默认安装的,它还提供了很多插件的配置项,可以不同于react的脚手架那样,无需eject就可以自定义配置。
其他
除此这些还有一些名字里带插件名的文件,显然就是插件工具各自的配置,基本配置搜文档就都能看到👌,我以前也是没养成先看文档的习惯,大部分东西文档里都有说明,如果咩有,极有可能是漏看了,再找找就会有。
自己捋下发现其实也就那点儿东西,很多配置技巧啥的还是得实际去操作,才能知道好不好用、适不适合当前的情况。
本来是打算一起写在这儿,但是中间过了五一隔了太久,后面有时间再去试着简单搞下脚手架工具,入个门用起来也可以有点儿底儿。