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先后打包部署前端和后端。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值