uni-app中NPM打包机制及优化方案

团队使用uni-app来开发微信小程序，开始用的挺舒服的，后面项目大了，发现项目不太好维护，并且主包会超，于是做了2个方案。一个是将公有的组件及方法抽象成公共的NPM包（团队搭建了私有NPM），一个是使用了小程序分包机制。这种方法开始有一定效果，后来发现主包体积还是飞速扩张，但主包的业务基本没加，于是探究了一下uni-app中针对NPM打包的优化方案。本文尝试从以下几个方面做个总结。

继续阅读

使用imgcook辅助前端开发

在之前的文章《开发一个基于uni-app的imgcook DSL》中开发了一个团队使用的uni-app的DSL，基本可以凑合使用了。前几天在团队内做了个imgcook小分享，这里也记录一下使用imgcook辅助前端开发的过程。

继续阅读

开发一个基于uni-app的imgcook DSL

最近看到了阿里的前端智能化的实践：imgcook 由设计稿一键智能生成代码的大厨，由设计稿直接生成前端代码，试用了一下，比zeplin和蓝湖做的更进一步，可以直接集成到项目开发的过程中。但发现一个问题，imgcook官方支持的DSL并不多，我们团队是使用Uni-app做跨端开发的，希望能将设计稿直接生成符合uni-app的代码，但官方没有，找了一个其他开发者贡献的，也没有找到合适的，于是自己动手写(组装)了一个。

继续阅读

使用Husky管理项目的Git Hooks（以配置Uni-app的ESLint和Commit Lint为例）

Git目前是毫无争议的项目版本管理的王者，而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于： eslint tslint 单元测试 E2E测试 style lint commit lint others checks 有的同学可能要说，没有这些项目质量也会很好，是的，一般这么说的，要么项目小，要么团队人少。如果你的项目人数>30，又是多分支开发的话，就会大概率需要这玩意。 初识Husky 原生的Git Hooks写法比较麻烦，Husky 做了比较好的封装。截止本文发布之日（2021-03-07），Husky已经发布了5.x版本，建议使用最新的版本，因为它有几个优势： 0依赖，没有依赖第三方的任何JS包 轻量，20K左右，Husky4要1MB 快，0.01s的量级，Husky要0.5s 跨平台，Linux、macOS、Windows都支持 安装 npm install husky --save-dev && npx husky init 是，就这一句就够了，自动会初始项目。观察你的项目，你会发现多了一个.husky目录，package.json中添加了prepare的命令： 添加ESLint 这里有一个策略，如果每次提交都进行全局的ESLint Check的话，效率会很慢。所以我们需要添加一个策略，就是每次提交的时候，只对你所修改的文件的做ESLint，这样效率会提高不少。要实现这个功能，需要借助一个非常好用的包：lint-staged。 先安装： npm install lint-staged --save-dev 配置命令: lint-staged有多种配置方法。 package.json .lintstagedrc .lintstagedrc.json .lintstagedrc.yaml .lintstagedrc.yml lint-staged.config.js, .lintstagedrc.js, or .lintstagedrc.cjs file in JS format 我个人还是习惯用package.json里写，也可以选择其他的。uni-app的Lint配置比较特殊，配置如下： "lint-staged": { "src/**/*.{js,ts,tsx,vue}": [ "vue-cli-service lint --fix src" ] }, 老的写法里还会加上git add这种，新版本已经不用了，都会自动加上。 配置Commit Lint 说起Commit Lint，有一个非常牛逼的库推荐给大家：conventional-changelog/commitlint: 📓 Lint commit messages 继续阅读

uni-app 启用 tree-shaking

使用了uni-app cli开发小程序和 H5 的跨平台应用，打包代码的时候为了追求体积，尝试启用 tree-shaking ，按照 uni-app官方的说法，这项目功能是给 H5 平台用的，不过测试了一下，发现结果还不太一样，这里做一个记录。 H5 平台 在 mainfest.json 中添加如下的配置 "h5": { "optimization": { "treeShaking": { "enable": true } } } 这是不够的，还需要改babel.config.js， '@vue/app', { modules: false,//原来是commonjs useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry' } 这样就可以启用 H5 平台的treeShaking，使用示例项目打包一下是可以的。 微信小程序平台 默认情况下，微信小程序平台是不行的，但在执行了上面的babel.config.js的修改之后，发现打包出来的vender.js中已经把没有引用到的函数给删除了，可以说是一个意外的惊喜了。 风险 目前上面的测试仅针对于示例登录项目的测试，修改此文件带来的其他风险暂时无法评估。