前端工程化小结

项目初始化

脚手架

• vue-cli

• create-react-app

• create-react-native

• 各种boilerplate（github 搜索 关键字+boilerplate）

框架和库

UI框架

• vue

  • element ui

  • iview

• react

  • antd

前后端交互

• fetch

• axios

编码规范

• eslint

• stylelint

打包构建

webpack

一切皆模块，都可以通过js的方式引入

webpack核心

配置

• entry

  • 打包入口，可以是单个文件，也可以是一个对象，或者数组，webpack会加载entry指定的文件，然后递归遍历每个文件的依赖，最后打包到一起，输出到output指定的路径

• output

  • 指定webpack打包之后输出的路径

• resolve

  • 配置webpack如何查找文件

  • 如果路径指向一个文件

    • 如果路径具有文件扩展名，则被直接将文件打包。

    • 否则，将使用 [resolve.extensions]选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接受哪些扩展名（例如 .js, .jsx）

  • 如果路径指向一个文件夹，则采取以下步骤找到具有正确扩展名的正确文件

    • 如果文件夹中包含 package.json 文件，则按照顺序查找 resolve.mainFields 配置选项中指定的字段。并且 package.json 中的第一个这样的字段确定文件路径。

    • 如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径，则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名，看是否能在 import/require 目录下匹配到一个存在的文件名。

    • 文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析。

• module

  • module里配置了针对每一种模块如何加载

  • webpack支持的模块

    • ES2015 import 语句

    • CommonJS require() 语句

    • AMD define 和 require 语句

    • css/sass/less 文件中的 @import 语句。

    • 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

• plugin

插件用于扩展webpack，在插件和loader能访问到的webpack上下文是不一样的，plugin可以处理loader处理不了的事情

- 常用插件
    - HtmlWebpackPlugin
    - DefinePlugin
    - HotModuleReplacementPlugin
-  开发
    - https://doc.webpack-china.org/contribute/writing-a-plugin/\#-

• loader

loader 用于加载待打包的资源，在import的时候触发。

-  常用loader
    - postcss-loader
    - css-loader
    - file-loader
-  开发
    - https://doc.webpack-china.org/contribute/writing-a-loader

babel

• babel-core

• bable-register

• babel-helper

• babel-loader

polyfill

开发调试

方案一：直接使用webpack-dev-server

• webpack-dev-server=dev-server+webpack-dev-middleware+webpack-hot-middleware

方案二：开发服务器+webpack-dev-middleware+webpack-hot-middleware

开发服务器

• 开发服务器一般基于express或者koa

• webpack-dev-middleware

  • express中间件，接受客户端的get请求，然后把webpack打包到内存里的文件返回给客户端

  • 源码分析

    • middleware.js---入口文件

      • 判断请求是否是get请求，不是则转到下一个中间件

      • 否则读取文件，发送给客户端

    • lib

      • GetFilenameFromUrl.js

        • 通过url取到内存里的文件名

        • PathJoin.js

          • 处理路径

      • Shared.js

        • 处理和webpack的交互

• webpack-hot-middleware

  • 启动server-send-event服务器，监听服务

  • 监听到打包事件之后，发送消息给客户端

  • 客户端接受到消息后刷新页面

  • hot-middleware是刷新整个页面，如何实现增量更新

    • react-hot-loader

    • vue-loader

  • 源码解析

    • middleware.js---入口文件

    • client.js

    • client-overlay.js

    • helpers.js

    • process-update.js

测试

单元测试

• vue

• react

  • jest+Enzyme

e2e测试

• nightwatch+selenium

• puppeter

打包优化

• UglifyJsPlugin

• OptimizeCSSPlugin

• CommonsChunkPlugin

• CompressionWebpackPlugin

• 按需加载

部署

• jenkins

• nginx