在NodeJS之前，由于没有过于复杂的开发场景，前端是不存在模块化的，后端才有模块化。NodeJS诞生之后，它使用CommonJS的模块化规范。从此，js模块化开始快速发展。 模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说，一个文件就是一个模块，有自己的作用域…

Babel 是一个 JavaScript 的编译器。你可能知道 Babel 可以将最新版的 ES 语法转为 ES5，不过不只如此，它还可用于语法检查，编译，代码高亮，代码转换，优化，压缩等场景。 Babel7 为了区分之前的版本，所有的包名都改成了 @babel/... 格式。…

[实践系列] 主要是让我们通过实践去加深对一些原理的理解。 有兴趣的同学可以关注 [实践系列] 。 求star求follow~ 1. 什么是babel ? 2. 可靠的工具来源于可怕的付出 3. Babel担任的角色 即使你自己没有使用它，但你的依赖很可能正在使用 Babel。…

由于现在社区有太多的零配置脚手架，导致日常业务开发中基本不会关注webpack的原理，甚至一些具体配置都不会去看。 由于疫情严重被困在家，无聊中透露着寂寞，我就按照着官方40分钟教你写webpack，学着实现一个小型的webpack, 通过此次实践简单了解webpack的打包原…

这是一份标准的webpack配置文件的组成部分。 执行npx webpack 查看打包后的代码，删除一些无用的代码后。大概是个样子 了解了webpack打包过程，我们可以尝试实现一个简单的webpack打包器。 新建文件夹mypack，新建src/template.js以及in…

路由分发式。 路由分发式微前端，即通过路由将不同的业务分发到不同的独立前端应用上。其通常可以通过HTTP服务器的反向代理来实现，或者通过应用框架自带的路由来解决。 前端微服务化。 前端微服务化，是微服务架构在前端的实施，每个前端应用都是完全独立（技术栈、开发、部署、构建独立）、…

在团队开发中，我们总是碰到这样或者那样的问题，加分号还是不加分号？tab还是空格？换行还是不换行？你是否还在为代码风格与同事争论不休？关于代码风格，我们很难区分谁对谁错，不同的人有不同偏好，唯有强制要求才能规避争论。 用工具统一风格。 以下几个工具可以帮助你在开发中来统一我们的…

那如果我们想在浏览器环境下，也能达到相同的效果，该怎么做？显然，如果我们直接把index.js文件里的代码直接复制到浏览器的控制台里执行，控制台会报错，因为浏览器并没有帮我们实现node环境里的CommonJS规范，换句话说浏览器识别不了require这个函数，没法去加载其他模…

现如今，前端开发的同学已经离不开 npm 这个包管理工具，其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区，理解其内部机制非常有利于加深我们对模块开发的理解、各项前端工程化的配置以加快我们排查问题（相信不少同学收到过各种依赖问题的困扰）的速度。 本文从三个角度：pac…