前端工程化相关 about blog HOT 5 OPEN

Eslint & Prettier

Eslint 是一个linter，支持 auto fix，prettier 是一个 formatter。

eslint 与 prettier 是有一些配置冲突的，可以用相关插件来解决冲突。如 eslint-config-prettier、eslint-plugin-prettier。

eslint-plugin-prettier 插件会调用 prettier 对你的代码风格进行检查，其原理是先使用 prettier 对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被 prettier 进行标记。eslint-plugin-prettier 也可以将 prettier 的错误提交给 eslint，通过 eslint 来提示错误。

通过使用 eslint-config-prettier 配置，能够关闭一些不必要的或者是与 prettier 冲突的 lint 选项。这样我们就不会看到一些 error 同时出现两次

开发中我使用 vscode 编码，通过 vscode 配置（注意不需要启用 editor.formatOnSave 选项）：

“eslint.autoFixOnSave”: true

lint 发展史

JSLint 的问题是所有的代码风格和规则都是内置好的，Douglas Crockford 不会向开发者妥协开放配置或者修改他觉得是对的规则。

Anton Kovalyov 吐槽：「JSLint 是让你的代码风格更像 Douglas Crockford 的而已」，并且在 2011 年 Fork 原项目开发了 JSHint。

JSHint 的特点就是可配置，同时文档也相对完善，而且对开发者友好。很快大家就从 JSLint 转向了 JSHint。

2013 年的 6 月份，Zakas 发布了全新的 lint 工具——ESLint。是基于 AST 的 lint，可以动态执行额外的规则，同时可以很方便的扩展规则。利用 AST 处理规则，用 Esprima 解析代码，执行速度要比只需要一步搞定的 JSHint 慢很多。

真正让 ESLint 逆袭的是 ECMAScript 6 的出现。ESLint 可扩展的优势一下就体现出来了，不仅可以扩展规则，甚至连解析器也能替换。Babel 团队就为 ESLint 开发了 babel-eslint 替换默认解析器，让 ESLint 率先支持 ES2015 语法。

from blog.

CMD/AMD/ES Module

from blog.

webpack

1. how-to-write-a-plugin 、Webpack原理-编写Plugin

2. Loader 和 Plugin

• Webpack 将一切文件视为模块，webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 Loader的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。
• Plugin可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

3. webpack 的构建流程

• 初始化参数，从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
• 开始编译，用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
• 确定入口，根据配置中的 entry 找出所有的入口文件
• 编译模块，从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译，在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
• 输出资源
  在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
  编译流程可以参考：webpack 编译流程

4. 提高 webpack 的构建速度

• 多入口情况下，使用 CommonsChunkPlugin 来提取公共代码
• 通过 externals 配置来提取常用库
• 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块，通过 DllPlugin 来对那些我们引用但是绝对不会修改的 npm 包来进行预编译，再通过 DllReferencePlugin 将预编译的模块加载进来
• 使用 Happypack 实现多线程加速编译
• 使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度
• 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度使用 Tree-shaking 和 Scope Hoisting来剔除多余代码

5. Webpack 热更新实现原理分析

from blog.

babel

babel astexplorer
Babel 插件手册

from blog.

gitlab CI/CD

from blog.