对于前端开发，您如何组织代码（在框架之外），以及使用什么工具来管理它？

如果你想编写一个前端库，或者一个不依赖框架的 Web 应用程序，你会遵循什么样的模块化风格？你会选择什么工具？为什么？

以下是一些选项的简要列表。我正在尝试进一步了解它们，所以很想知道您的看法！如果我遗漏了什么相关内容，请告诉我！

模块化“风格”

1. ES6 模块：JavaScript 原生的。
2. CommonJS：该系统专为服务器端 JavaScript而设计，用于 Node.js。模块以同步方式加载，并按照 JavaScript 运行时找到它们的顺序进行处理。仅支持将对象作为模块。您可以通过Browserify在客户端使用它。
3. 异步模块定义 (AMD)：采用浏览器优先的方法。模块和依赖项可以异步加载。模块可以是不同类型的（对象、函数、字符串等等）。RequireJS是最流行的客户端实现。
4. 通用模块定义（UMD）：旨在提供同时支持 CommonJS 和 AMD 风格的“通用”模式。
5. 模块模式：使用闭包为相关变量和函数创建局部范围的某种形式。
6. 不要模块化代码。将所有内容放在一个文件中。

捆绑器

模块打包是将一组模块（及其依赖项）按正确顺序组合成单个文件（或一组文件）的过程。打包器还可以处理其他资源，例如 CSS 和图片。

现在有很多不同的捆绑器，可以说，这些是最受欢迎的：

1. Webpack：Webpack 用于编译 JavaScript 模块，但如果包含相应的加载器，它也可以转换 HTML、CSS 和图像等前端资产。
2. Parcel：一款 Web 应用程序打包工具，其独特之处在于其开发者体验。它利用多核处理能力提供极快的性能，并且无需任何配置。
3. RequireJS：针对浏览器内使用进行了优化，但也可用于其他 JavaScript 环境。支持 CommonJS 风格的模块。
4. Rollup：Rollup 允许您将代码编写为 ES6 模块，然后将其编译回现有支持的格式，例如 CommonJS 模块、AMD 模块和 IIFE 样式的脚本。
5. Browserify：允许开发人员编译可在浏览器中使用的 CommonJS 风格的模块。
6. FuseBox：Webpack 的替代品，提供一流的 TypeScript 支持。可以替代 Babel。

2020 年选择合适的捆绑器。

转译器

转译器是一种工具，它可以读取一种编程语言编写的源代码，并生成另一种语言的等效代码。转译器用于将 CoffeeScript 和 Typescript 转换为 JavaScript，以及将较新版本的 JavaScript 转换为较旧版本的 JavaScript。

流行的转换器有：

1. Babel：Babel 主要用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。现在，它拥有大量插件，可以扩展 Babel 以支持特定的库、linting 等工具、浏览器优化以及代码压缩等功能。
2. Bublé：Bublé 用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。Bublé 深受 Babel 的启发，但其功能仅限于可编译为紧凑、高性能 ES5（以及 JSX）的 ES 特性，而且它体积相对较小，速度也更快。
3. Traceur：Traceur 用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。支持实验性功能。
4. Typescript：TypeScript 是 JavaScript 的类型超集，可编译为纯 JavaScript。
5. CoffeeScript：CoffeeScript 是一门小型语言，旨在以简单的方式展现 JavaScript 的优点。可以转换为您选择的 JavaScript 版本。

任务运行器

任务运行器用于自动执行诸如缩小、编译、单元测试和 linting 等频繁任务。

1. 咕噜声
2. Gulp

照片由Vanessa Bucceri在Unsplash上拍摄

感谢您的阅读！欢迎订阅我的RSS 源，并在社交媒体上与他人分享这篇文章。💌

您可以通过ko-fi给我买杯咖啡来表达您的感激之情。🙂