create-wl-app

外观

脚手架核心 ​

代码规范 ​

  • 该脚手架的初心也是为了统一多人协作开发带来的代码不规范问题，所以特意开发了此脚手架；
  • 有了更加合理的代码规范，可以为后面的开发和维护带来无穷的好处；
  • 但这个世界上任何的规矩都无法彻底规范开发者，所以提高自身开发规范性才是最重要的；

Eslint ​

  • Eslint 除了必要的一些代码格式化外，最重要的就是检查代码语法是否错误，将错误展现在开发时候，可以说是开发必备工具；
  • 该脚手架中添加了比较多的 Eslint 规范，针对 react 和 vue3 用户都带来了不同的配置；
  • 除了规范必要的语法之外，还有代码格式规范；
  • React Eslint 规范文件位置：.eslintrc.cjs
  • Vue3 Eslint 规范文件位置：.eslintrc.cjs

Prettier ​

  • Prettier 它的作用主要就是将代码格式化的更加的漂亮，且代码风格统一，更利于代码阅读；
  • 该脚手架的两个模板都用了同一套规则；
  • Prettier 规范文件位置：.prettierrc.cjs

Git ​

  • 有了以上两个规范，可以将正常开发者的代码进行有效的规范，但也有一种情况就是，无视代码规范，照旧我行我素，然后提交代码，这种情况也会有；
  • 所以在该脚手架基础上代码提交之前会校验代码，如果代码中对 Eslint 报的错误没有进行修复，则无法进行正常提交；

项目优化 ​

  • 尽管 Vite 已经默认优化了很多开发、打包，但本身还是有很多可优化的空间；
  • 该脚手架的模板项目正对开发过程以及项目打包进行了进一步的配置，可以更加有效的优化打包；

代码分割 ​

  • 引入代码分割插件：vite-plugin-chunk-split ，可以对代码进行有效的分割，减少单文件体积；
  • 手动的分割代码块，将比较大的库进行单独打包；
js
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vue: ['vue'],
        lodashEs: ['lodash-es'],
        elementPlus: ['element-plus'],
      },
    },
  }
},

压缩方式 ​

  • 采用Esbuild
  • Vite 默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%；
  • 打包后去掉 console 和 debugger，需要注意的是 console 有可能造成内存泄漏，所以还是有必要禁止的；
js
esbuild: {
  drop: ['debugger', 'console'],
},

适配方法 ​

  • 该脚手架统一使用 px to rem这个方案；
  • 两个模板都引入了 postcss-pxtorem 这个库，自动将普通 css 内的 px 单位转换成 rem；
  • 移除适配方法在这里