极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 什么是前端工程化

随着 npm 及 webpack 的出世,前端的开发方式发生了天翻地覆的变化,生产力得到了大幅提高。而生产力得以提高的一切措施都可称之为前端工程化。

随着前端工程化的发展,前端开发的以下界限渐渐明晰起来,我把它总结为四个方面。

  1. 构建
  2. 开发
  3. 测试
  4. 部署

由于涉及到方方面面,这里总结一个大纲。

# 构建

前端构建由以前的 CDN + Template 的方式对前端进行构建,甚至直接引用 CDN 无构建。而目前流行的方式是使用 webpack(rollup) 打包成 bundle 进行构建。而未来的趋势是 bundleless,如 vite 和 snowpack,可详见我的另外一篇文章。

  1. CDN + Template 方式往往前后端一起开发而显得很分裂,后端的模板引擎有 jinja2django template 等,及 Node 开始兴起时的 ejsjade(pug) 等。此时的前端更像是后端的附属。由此引发出前后端分离,以 ajax 请求数据作为二者桥梁。
  2. Javascript 全局变量如何避免命名冲突,大项目中的 JS 如何控制脚本依赖。由此引发出 JS 的模块化: amdcjsumdesm,目前 cjs 是主流,但 package 往往会打多个格式出来
  3. 模块化后有依赖关系的 JS 如何工作。由此引发了构建工具的发展,如以 cjs/es 为基础的 webpack 等(rollup)
  4. 如何更好地利用 HTTP 缓存。由此引发了构建工具并持续改进它的永久缓存功能
    1. 把所有模块打成一个包并计算 hash (利用永久缓存)
    2. 根据模块使用频繁度分包 (改进永久缓存的失效算法,避免一个库的更新造成了整个 bundle 的失效)
    3. 改进 hash 算法 (避免因变量名改变及增减备注造成永久缓存失效)
    4. 模块联邦 (永久缓存可放入云端使多项目共享)
  5. 如何更好的减小 JS 打包体积。由此引出了各种方案
    1. 如何更好地压缩 (uglifyjs)
    2. 编译器预计算 (prepack)
    3. 得益于 ESM 的 Tree Shaking (解析深度依赖的 Tree Shaking)
    4. 更先进的浏览器支持,往往需要的代码更少,如 CSS 不需要厂商前缀,ES 代码量更少,不需要 poyfill。(browserlist -> @babel/preset-env -> postcss-preset-env )
  6. CSS 选择器如何避免命名冲突,如何更好地维护 CSS。由此引发出多个 CSS 的方法论,如 OOCSS、BEM 等,及构建工具的自动化处理。由此引发出多种方案
    1. CSS Module: 把你的选择器打包成 带 hash 选择器
    2. 以及更简单的 CSS Scope: 给该模块的每一个元素带上一个随机属性/类名
  7. CSS 如何建立更好的逻辑性,如根据几个变量的改变设置多套皮肤,而非处处手写同一个 RGB 造成维护。由此引发出静态编译的 SassLess 等,及最新的标准:可与 JS 交互的 CSS Variable,拥有了运行时的能力
  8. CSS 浏览器厂商前缀处理。得益于 postcss 插件生态 的 autoprefixer

# 开发

  1. React/Vue/Angular 的 UI = f(State) 公式

# 测试

# 部署

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 3/17/2021, 4:13:49 AM