@hasaki-ui/hsk-garen v1.3.4
Hsk-garen 脚手架
如果发现文章有任何错误,请联系相关负责人修改,或者联系作者(972325584@qq.com) 原文地址:http://29b2b4a9.wiz03.com/share/s/0FIHiF2KRkk72qWr_r2tEb4P38y9Sr2ftkTN2HY_O93Mp44V
hsk-garen是HskUI的脚手架(前端工程化工具),用于HskUI项目的编译和执行,主要功能有自动生成代码,代码编译够构建等
hsk-garen由优化vue-cli而来
hsk-garen使用webpack实现代码编译和构建,资源的模块化等功能,并且屏蔽了webpack的复杂性,让开发者不需要去了解复杂的webpack的配置和webpack的插件和loader的使用。会默认将webpack的配置最适合vue组件的开发。虽然这样极大的损失了项目构建的可定制化,但能开箱即用啊!
hsk-garen在构建的过程中会支持一些代码的自动生成(比如路由生成,图标的动态生成,公共组件的代理代码等等),这些代码的自动生成,极大的提高了开发效率和规范化代码,同样提高了代码的可扩展性
hsk-garen流程图:
配置文件
hsk-garen根据配置文件运行,配置文件默认需要为项目的src/conf/build-config.js
。
代码生成器
代码构建
构建的配置文件是build-config中的builder
配置项。
当前的构建分为三种方式:browser
,file
,test
。根据配置builder.model
指定
不管使用哪种模式,webpack都使用了下列插件
基础webpack配置使用了下面插件:
- webpack.DefinePlugin:定义常量,用于定义配置项
constant
的内容 - webpack.ContextReplacementPlugin:内容替换,用于处理momentjs中语言配置只加载中文
- html-webpack-plugin:webpack html插件,用于对入口html自动注入资源文件
- copy-webpack-plugin:复制,用于对static文件夹下的内容复制到构建目录中去
browser
browser模式会在本地用node启动一个web server,所有的资源文件全被加载到内存。使用者打开浏览器,访问本地web服务器,即可查看到效果,适合于开发环境。
在browser模式下,除了基础配置中使用的插件,还使用了下面的插件:
- HotModuleReplacementPlugin:热替换
file
file模式会启动webpack将项目代码构建成目标文件,这些目标文件可直接发布到web服务器(一般为nginx,apache)上作为静态资源文件发布,适合于生产环境。
在file模式下,除了基础配置中使用的插件,还使用了下面的插件:
- lodash-webpack-plugin:lodash按需加载
- webpack.optimize.UglifyJsPlugin:js代码压缩
- optimize-css-assets-webpack-plugin:css优化
- extract-text-webpack-plugin:样式代码抽取
- webpack.optimize.CommonsChunkPlugin:公共包抽取,详情请见代码分割和按需加载
根据配置使用:
- compression-webpack-plugin:使用gzip压缩
- webpack-bundle-analyzer:启动代码分析报告
test
test模式会启动karma,然后karma启动webpack对整个项目进行构建,构建完成后,karma执行测试案例进行项目测试,适用于对代码进行测试。
test模式下只使用了webpack.DefinePlugin
插件
在测试环境下需要配置builder.karma
对karma进行配置,更多karma的配置可以查看karma详细配置
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago