共计 2154 个字符，预计需要花费 6 分钟才能阅读完成。
小程序开发现状:
- 开发工具不好应用(无奈热更新，编译迟缓)；
- 无奈应用 css 预处理语言(Sass、Less)，有些 IDE 的插件能够监听编译，但不同编辑器须要额定装置；
- 无奈应用工程化(图片主动压缩，文件监听编译等)；
- 编码繁琐(创立一个页面，须要新建 4 个文件(.wxml、.js、.json、.wxss), 每次新建都须要新建 4 次或者复制文件比拟浪费时间)；
- 团队多人合作，代码格调、应用的编辑器不统一；
技术选型：
在进行小程序我的项目启动，进行技术选型的时候，对市场上多个小程序框架进行了思考:
- uni-app、mpVue、wepy、taro、kbone
团队成员 mpvue、wepy、uni-app 都有理论的我的项目教训, 且依据 Github 上的 star 数还有 issue, 最初决定回到到应用原生开发。
起因:
尽管框架有些很成熟，有工程化和跨端的解决方案，也有理论的上线我的项目，但思考到后续一些撑持性的问题(保护，文档，坑等)，在 github 上看了 issue，有些曾经没在保护了。
想着让我的项目继续迭代，不受第三方框架限度，放弃持重，最初决定应用原生，跟着官网的迭代降级，本人保护，引入前端工程化的思维，进步繁琐的流程以及开发效率。
引入工程化
-
基于Webpack4.x, 自定义 Webpack 配置
-
scss 编译为 wxss：定义全局变量, 应用公共的款式文件, 进步 css 开发效率和可维护性；
-
主动压缩图片资源 : 小程序对包大小有限度，压缩图片大小能够缩小空间，放慢页面加载；一般的图片压缩须要将图片上传到在线图片压缩网站，压缩完再保留下来，效率比拟低。当初执行命令就能够主动压缩图片。
-
-
代码标准
-
eslint: 能在 js 运行前就辨认一些根底的语法错误，缩小不必要的小问题，进步调试效率；
-
husky、line-staged、prettier: 对立团队代码标准: 当执行代码提交到 git 仓库时，会将已改变文件的代码格式化对立标准的代码格调;
-
-
命令行创立页面和组件模板
- 小程序每次新建页面或者组件，须要依赖 4 个文件 (.wxml,.js,.wxss,.json)。只须要执行 npm run create 命令，会提醒抉择创立页面还是组件，抉择实现输出页面或者组件的名字，会主动生成 4 个模板文件(.wxml,.js,json,.scss) 到对应的目录
-
引入 jest 单元测试
- 生成测试覆盖率
我的项目构造
app -> 小程序程序的入口，应用微信开发者工具制订 app 目录 cli -> 生 pages 和 components 的模板脚手架 img -> 图片资源原文件.eslintignore.eslintrc.js.gitignore(疏忽 wxss 的提交，多人和做改变，容易有抵触，将 scss 文件传到服务器就好了).prettierrc.js(代码格式化格调配置)babel.config.jsjest.config.js(单元测试配置文件)webpack.compress.js(指定入口图片资源文件，将图片压缩编译到小程序的资源目录)webpack.config.js -> (工程化入口文件, 指定入口 scss 文件，监听文件变动，主动将 scss 编译为 wxss)我的项目应用的包文件
- webpack、babel、eslint: 转换、标准 js
- chalk: console.log 打印黑白色彩
- scss、css-loader: 编译 scss
- figlet: 控制台显示字体款式
- husky,line-staged,prettier: 代码格式化相干
- jest、miniprogram-simulate: 单元测试
我的项目运行
. 装置依赖 npm install 或 yarn install. 编译 scss npm run dev. 压缩图片 npm run img. 单元测试 npm run test(生成测试报告) npm run test:watch(监听测试文件改变—开发环境下应用)示例
编译 scss
执行 npm run dev
压缩图片
执行 npm run img将图片压缩到 app/assets/img 目录下, 一张 7k 的图片变成 5k，肉眼看不出有什么差异。
新建页面
执行 npm run create终端会提醒抉择页面还是组件, 抉择页面, 按 Enter 键，输出页面的名称，会主动将 4 个文件创建到 app/pages/xxx 下。
新建组件
执行 npm run create终端会提醒抉择页面还是组件, 抉择组件, 按 Enter 键，输出组件的名称，会主动将 4 个文件创建到 app/components/xxx 下。
单元测试
执行 npm run test 生成测试报告执行 npm run test:watch 监听测试文件，不便开发应用
其余思考
工程化的初衷就是为了缩小重复性的操作，进步编码的效率和乐趣。
JavaScript 是弱类型语言，益处是灵便，害处是太灵便(多人合作，保护他人写的代码就是很苦楚了)。
我的项目最次要的是持重，可高度自定义拓展，不拘谨于版本和地上那方，特地多人合作的团队，工程化能给团队带来更多的收益，后续也会思考将 TypeScript 等其余好的计划引入我的项目。
我的项目源码
https://github.com/czero1995/miniprogram-cli