frontend -- Node&前端模块化

Starlahi

已于 2022-04-09 22:38:45 修改

阅读量412

点赞数

分类专栏：前端文章标签： javascript node.js

于 2021-06-23 16:25:35 首次发布

本文链接：https://blog.csdn.net/starlahi/article/details/118155866

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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。