frontend -- Node&前端模块化

npm vs yarn

一、前端模块化-- CommonJS、AMD、CMD、ES6

JavaScript模块化 之( Commonjs、AMD、CMD、ES6 modules)演变史 - 简书

CommonJS 规范 | Webpack 中文指南

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

·-----seajs / require : 是一种在线"编译"模块的方案，相当于在页面上加载一个CMD/AMD解释器。这样浏览器就认识了define、exports、module这些东西。也就实现了模块化。

·-----browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

二、前端构建集成工具

webpack和gulp的理解与区别 - 活在当下zql - 博客园 (cnblogs.com)

1、Gulp

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，启动server、sass/less预编译、文件的合并压缩等替代手工实现自动化工作，gulp有task（代码压缩、合并、编译、浏览器实时更新等）定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。

2、webpack 「吐血整理」再来一打Webpack面试题 - 掘金 (juejin.cn)

Webpack 教程 - 姜瑞涛的官方网站

主要配置： 入口(Entry)、加载器(Loader)、插件(Plugins)、出口(Output)

webpack是模块化打包工具，通过loader（加载器）和plugins（插件）对开发中的所有资源（图片、js文件、css文件等，每个资源文件都是一个模块（module）文件）进行处理，根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。

loader ：webpack 默认支持处理 JS 与 JSON 文件，其他类型都处理不了，这里必须借助 Loader 来对不同类型的文件的进行处理。

plugins：plugin拓展插件是用来解决一些loader也无法处理问题的，他可以监测到webpack打包过程的整个生命周期，为我们更好的打包提供便利，辅助开发，如提供浏览器的热更新；可以对打包后的模块文件（bundle.js）进二次处理，例如代码压缩减小文件大小等

主要的loader：

style-loader 就是将处理好的 css 通过 style 标签的形式添加到页面上

css-loader，处理 CSS

postcss-loader，自动添加 CSS3 部分属性的浏览器前缀

less-loader

sass-loader & node-sass：

Loader	说明
file-loader	解决图片引入问题，并将图片 copy 到指定目录，默认为 dist
url-loader	解依赖 file-loader，当图片小于 limit 值的时候，会将图片转为 base64 编码，大于 limit 值的时候依然是使用 file-loader 进行拷贝
img-loader	压缩图片

tree shaking ？

3、babel & polyfill

引入polyfill - Babel教程 - 姜瑞涛的官方网站

Babel的主要工作有两部分：

• 语法转换：箭头函数语法、async函数语法、class定义类语法和解构赋值等等都是ES6新增的语法。
• 补齐API：通过 Polyfill 的方式在目标环境中添加缺失的特性

因为Babel默认只转换新的JavaScript语法（syntax），而不转换新的 API。

新的API分类两类，一类是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法，例如Object.assign，Promise.resolve；另一类是新的实例方法，例如数组实例方法[1, 4, -5, 10].find((item) => item < 0)

如果想让ES6新的API在低版本浏览器正常运行，我们就不能只做语法转换。

在前端web工程里，最常规的做法是使用polyfill，为当前环境提供一个垫片。所谓垫片，是指垫平不同浏览器之间差异的东西。polyfill提供了全局的ES6对象以及通过修改原型链Array.prototype等实现对实例的实现。

polyfill广义上讲是为环境提供不支持的特性的一类文件或库，狭义上讲是polyfill.js文件以及@babel/polyfill这个npm包。

我们可以直接在html文件引入polyfill.js文件来作为全局环境垫片， polyfill.js 有Babel官方的 polyfill.js，也有第三方的。

什么是API？

JS里的数组有排序方法sort()，这个就是JS语言制定者给数组制定的API。引申一下，你使用了别人已经写好的对象、类、函数或方法，那就是使用了API。

那ES6有哪些新的API呢？Promise对象，数组的Array.from()与Array.of()方法，数组实例的展平方法flat()，Object.assign()方法等等。只要是新的对象名、类名、函数名或方法名，就是ES6的新API。

SourceMap 配置选择

SourceMap 是一种映射关系，当项目运行后，如果出现错误，我们可以利用 SourceMap 反向定位到源码位置

借助插件 webpack-bundle-analyzer 我们可以直观的看到打包结果中，文件的体积大小、各模块依赖关系、文件是够重复等问题，极大的方便我们在进行项目优化的时候，进行问题诊断。

简单说说 tree-shaking 有啥鸟用吧！ - 掘金 (juejin.cn)

4、ES6

（1）promise vs async

ES6 入门教程

Object对象的propertyIsEnumerable()方法可以判断此对象是否包含某个属性，并且这个属性是否可枚举。

需要注意的是：如果判断的属性存在于Object对象的原型内，不管它是否可枚举都会返回false。

三、Node

1、express：

Express/Node 入门 - 学习 Web 开发 | MDN

安装 Express

2、pug模板引擎：

pug模板引擎(原jade) - 小火柴的蓝色理想 - 博客园

入门指南 – Pug 模板引擎中文文档 | Pug 中文网

3、doT.js: JavaScript 模板引擎，Node.js 和浏览器同样适用。

doT.js - 精巧快速的javascript模板引擎，Node.js和浏览器同样适用

4、nodemon：Node.js 监控工具

nodemon首页、文档和下载 - Node.js 监控工具 - OSCHINA - 中文开源技术交流社区

nodemon - npm

5、express+gulp搭建node热部署服务，启用监听

设置 Node 开发环境 - 学习 Web 开发 | MDN

四、CI、CD和部署

1、JAVA做后端，前端使用gulp搭建，怎么部署呢？

        后端是由java搭建的，现在前端的页面并不是由Gulp搭建，在学习gulp过程中，发现需要node.js，可是java的搭建是在其他环境，我用Gulp搭建和完成前端之后，怎么配合后端进行部署呢？ 

        maven有个叫frontend.maven.plugin的插件可以完成node和bower install，npm install，npm run等命令，可以在package同时打包前台代码，最终和后端java一起打成一个war包。我们项目里就是这样做的。

   另外再补充一点，如不用maven插件打成一个war的话（前后端工程解耦），也可以设2个有关联关系的jenkins project先后打包部署前端和后端。