Web Engineering

前端工程化（工具）
前端组件化（生态）

npm

  • NPM的全称是Node Package Manager，Nodejs的包管理器
  • 从API对用户友好这一个角度来说，Node.js的模块机制是非常优秀的。

package.json

必备字段

  • main指定了加载的入口文件，对于require，只需要main属性即可
  • name : 包名，需要在NPM上是唯一的。不能带有空格。
  • description : 包简介。通常会显示在一些列表中。
  • version : 版本号。一个语义化的版本号（http://semver.org/ ），通常为x.y.z。该版本号十分重要，常常用于一些版本控制的场合。
  • keywords : 关键字数组。用于NPM中的分类搜索。
  • maintainers : 包维护者的数组。数组元素是一个包含name、email、web三个属性的JSON对象。
  • contributors : 包贡献者的数组。第一个就是包的作者本人。在开源社区，如果提交的patch被merge进master分支的话，就应当加上这个贡献patch的人。格式包含name和email。
  • bugs : 一个可以提交bug的URL地址。可以是邮件地址（mailto:mailxx@domain），也可以是网页地址（http://url）。
  • licenses : 包所使用的许可证。
  • repositories : 托管源代码的地址数组。
  • dependencies : 当前包需要的依赖。这个属性十分重要，NPM会通过这个属性，帮你自动加载依赖的包。

额外字段

  • bin : 指定各个内部命令对应的可执行文件的位置
  • scripts : 包管理器（NPM）在对包进行安装或者卸载的时候需要进行一些编译或者清除的工作，scripts字段的对象指明了在进行操作时运行哪个文件，或者执行拿条命令。
  • engines
  • devDependencies : 指定项目开发所需要的模块
  • author
  • peerDependencies字段，就是用来供插件指定其所需要的主工具的版本。
  • config字段用于向环境变量输出值
  • browser指定该模板供浏览器使用的版本
  • engines指明了该项目所需要的node.js版本
  • man用来指定当前模块的man文档的位置
  • style指定供浏览器使用时，样式文件所在的位置

dependencies & devDependencies format

  • 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
  • 波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
  • 插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
  • latest：安装最新版本。

webpack

  • webpack以一种非常优雅的方式解决了前端资源依赖管理的问题，它在内部已经集成了许多资源依赖处理的细节，但是对于使用者而言只需要做少量的配置，再结合构建工具，很容易搭建一套前端工程解决方案。
  • 基于webpack的前端自动化工具，可以自由组合各种开源技术栈（Koa/Express/其他web框架、webpack、Sass/Less/Stylus、Gulp/Grunt等），没有复杂的资源依赖配置，工程结构也相对简单和灵活。
  • 根据webpack的设计理念，所有资源都是“模块”，webpack内部实现了一套资源加载机制，除了借助插件体系加载不同类型的资源文件之外，webpack还对输出结果提供了非常精细的控制能力，开发者只需要根据需要调整参数即可
  • test项表示匹配的资源类型，loader或loaders项表示用来加载这种类型的资源的loader
    对于css文件，默认情况下webpack会把css content内嵌到js里边，运行时会使用style标签内联。如果希望将css使用link标签引入，可以使用ExtractTextPlugin插件进行提取。
  • 图片资源的loader配置：意思是，图片资源在加载时先压缩，然后当内容size小于~10KB时，会自动转成base64的方式内嵌进去，这样可以减少一个HTTP的请求。当图片大于10KB时，则会在img/下生成压缩后的图片，命名是[hash:8].[name].[ext]的形式。hash:8的意思是取图片内容hushsum值的前8位，这样做能够保证引用的是图片资源的最新修改版本，保证浏览器端能够即时更新。
1
2
3
4
5
6
7
8
{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
        'image?...',
        'url?limit=10000&name=img/[hash:8].[name].[ext]',
    ]
}

  • 多个入口文件之间可能公用一个模块，可以使用CommonsChunkPlugin插件对指定的chunks进行公共模块的提取，下面代码示例演示提取所有入口文件公用的模块，将其独立打包：
1
2
3
4
5
6
7
8
9
var chunks = Object.keys(entries);
plugins: [
    new CommonsChunkPlugin({
        name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
        chunks: chunks,
        minChunks: chunks.length // 提取所有entry共同依赖的模块
    })
]

  • webpack提供了强大的热更新支持，即HMR(hot module replace)。HMR简单说就是webpack启动一个本地webserver（webpack-dev-server），负责处理由webpack生成的静态资源请求。注意webpack-dev-server是把所有资源存储在内存的，所以你会发现在本地没有生成对应的chunk访问却正常。

ref

ES6

ECMAScript 6, ECMAScript 2015

  • 受欢迎的语法糖，例如箭头函数（arrow functions）和简单的字符串插值（string interpolation）
  • 代理（proxies）和生成器（generators）

Responsive Web design

  • 灵活的基于网格的布局：在移动设备上查看页面时，如果设备的朝向从横向改为竖向时，页面布局会自动地调整并在新布局中展开内容进行显示，这就是灵活的基于网格的布局。在Twitter Bootstrap中，可以使用如下的CSS标签（tag）来实现：
  • 灵活的图像：动态调整图像的尺寸
  • Media Queries（媒介查询）：这个是CSS3的特性，该特性可以通过查询媒介设备将适当的CSS返回给浏览器。Media queries are at the heart of a recent design trend called responsive web design.

Glosarry

  • MVVM (Model-View-ViewModel)
  • SPA (single-page-application)
  • Responsive Web design