前端工程化

总结前端的开发流程、技术、工具、经验等规范化、标准化；
其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间；

如何前端工程化


模块化（代码、资源）、组件化（UI）、规范化、自动化；
js模块化_
edas-widgets-main作为edas加载所有widgets的整体工程；

  • 可以拆分为单独的小模块；单独的widget，无缝开发；
  • webpack打包成一个文件同步记载，或者是打包成多个子文件异步加载

css模块化

  • BEM
  • css in js
    • 完全抛弃css，但是写伪类麻烦
  • css module
    • scoped style 推荐（参考widget的css方案）

资源模块化

扩展

模块化

定义： 将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载；

模块化背景：

  • 加载js全局变量污染；
  • 重命名；
  • 加载顺序

早起解决方案

  • 必包IIFE、相互隔离，一个文件，抛出一个全局变量，减少定义全局变量；
    • 加载顺序是文件之间的依赖；
    • var module1=(function(){ return ‘num1’ })()
  • 面向对象开发
    • 每个文件，return一个对象；
    • 很多插件也是利用这个原理开发；
      • 使用类或者说是函数的形式开发；
        1. (function($){
        2. const changeMe = function(){};
        3. changeMe.prototype.xxx= yyy
        4. window['changeMe'] = changeMe
        5. })($)

有哪些模块化方案

  • js模块commonJs，AMD，CMD
    • commonJS
      • nodejs、npm包，require引入路径、原声module对象、沙箱编译、加载一次会缓存，文件依赖树
      • 局限：node原声API在服务端模块同步加载
    • AMD（异步模块定义）
      • require加载模块
        • require([module],callback)前置依赖加载完成执行回调函数，模块的加载不影响后面语句运行
        • require([math],function(math){ math.getNum() })
      • define定义模块
        • define(id，dependencies，factory)
        • define(id,[require,moment],function(require,moment){ return { getVal:moment.valueOf() } })
        • requireJs是模块化的工具
      • requireJS优点：并行加载，依赖前置，无需担心顺序，按需加载
      • requreJS缺点：个人觉得配置麻烦
        • 页面加载requireJS，main文件配置路径、shim、不满足AMD规范的文件
        • edasnext viper也是这样配置的；
    • CMD结合commonJS和AMD （阿里-seaJS）
      • define(id,dependence,factory)
      • define模块,export象，require依赖
      • CMD 推荐依赖就近 [a(c),b]，也可以依赖前置；
        • 加载顺序 a,b,c
        • 解析定义模块内部的顺序： 在模块执行中，a模块发现依赖c，顺序是a,c,b
        • 最后才是callback回调函数
      • 推荐功能单一性
    • ES6
      • import 、 export 、as 、default 、from
      • 与commomJS区别
        • commonJS是值的拷贝、import是值的引用
        • 运行时加载、编译时输出接口
        • import 动态引入，不会缓存

资源

工程化
https://www.jianshu.com/p/88ed70476adb
模块化
https://segmentfault.com/a/1190000015302578