使用Webpack编写更好的JavaScript

前言:

我知道了,JavaScript生态系统正在耗尽。存在大量的工具和框架,每个人都希望从同行的缺点中拯救你。试图学习和跟上这些工具需要花费时间和精力,而您宁愿投入到您的项目中。减少认知开销是Forestry.io理念的核心组成部分 - 我们设计了一个易于设置和使用的静态网站CMS。一个好工具不应妨碍你!

问题

编写复杂的客户端代码是痛苦的,没有一些帮助。你已经知道一个组织良好的代码库更容易理解和维护,但是当你只是将一堆文件放入标签中时,这很难完成。最重要的是,最佳实践要求您的所有代码都应该放在一个文件中。

这个空间中的许多解决方案,比如Gulp,都可以用来将一堆JavaScript文件合并为一个包。这是一个很大的改进 - 但它真的够了吗?我们剩下一个线性依赖链,并依靠全局变量在我们单独的文件之间共享信息。

更好的方法

本文将探讨为什么Webpack是绑定JavaScript应用程序的正确选择。如果您从未为您的前端资产使用过构建工具,那么Webpack是一个很好的开始。如果您已经习惯使用像Gulp这样的任务运行者,那么将资产绑定分配给Webpack将为您提供更复杂的组织和依赖管理策略。

Webpack 可以帮助你编写更好的代码,并且可以让你专注于制作优秀的软件。

Webpack与Gulp

也许你之前听说过这个:Gulp是一个任务运行者,Webpack是一个模块打包器。这实际上意味着什么?

Gulp是一款出色的自动化工具。它允许开发人员使用JavaScript设置复杂的文件处理管道,并将其作为简单的命令运行。但是,当涉及到打包JavaScript应用程序时,前面提到的文件粉碎大概就像它可以去的一样。如果文件A中的代码依赖于文件B中的代码,则需要告诉Gulp首先包含文件A. 这可以直接在Gulp配置中完成,也可以通过维护一个单独的清单文件用于资产构建器之类的插件。随着您添加更多文件和您的依赖关系树的增长,这可能会变成一件难事。

复杂的依赖关系解决方案是Webpack的专长。您指定一个文件作为您的应用程序的入口点,Webpack将递归处理您代码中的模块导入以构建依赖关系图。一切完成后,Webpack会将您的JavaScript放在一个包文件中。没有必要告诉Webpack它应该把文件放在一起的顺序; 它通过阅读你的代码来计算出来。

Gulp的依赖关系解析能力有限,需要您明确定义依赖关系链。Webpack使用内置于代码中的依赖性逻辑。

学习交流前端方面的技术,打算深入了解这个行业的朋友,可以加下小编的前端学习裙330+336+289=邀请码(寂静)

每天都有大咖给大家分享前端学习知识和路线方法,欢迎小伙伴加入交流

编写模块化代码

为了让Webpack发挥它的魔力,你的代码需要被编写成JavaScript模块。JavaScript模块是一个JavaScript文件,可导出用于代码其他部分的功能块。然后其他文件中的代码可以导入该模块以便使用它。

Webpack支持模块配置的两个标准:EcmaScript和CommonJS。以下示例演示如何配置定义的模块,hello.js以便通过以下app.js每个标准中指定的文件加载:

EcmaScript模块语法

EcmaScript标准使用export和import关键字。

CommonJS模块语法

CommonJS标准module.exports通过调用require()函数来分配导出的代码并导入它。

如果您不确定使用哪种语法,请坚持编写EcmaScript模块。了解这两个选项仍然有帮助,因为您可能会遇到使用CommonJS语法的第三方库,因此您需要使用require()它们将它们导入到代码中。

直观的依赖关系解决方案

Webpack的依赖性解析是直观的,因为您不需要查看Webpack配置以了解正在发生的事情。你只需要知道入口点在哪里,这通常是显而易见的。这对您项目的新贡献者很有帮助:他们可以理解代码中的关系,而无需了解构建配置的详细信息。

配置Webpack

让我们设置最简单的配置来理解Webpack的核心组件。从设置以下文件结构开始:

src/

app.js

webpack.config.js

默认情况下,Webpack会在名为的文件中查找配置webpack.config.js。接下来,让我们通过运行以下终端命令来安装Webpack模块:

npm init -y

npm install --save-dev webpack webpack-cli

现在Webpack安装在项目中,

webpack.config.js

在文本编辑器中打开并添加以下代码:

这就是您需要的一个简单的Webpack配置:定义入口点和输出文件。Webpack需要输出的绝对路径,所以我们需要path在运行时使用模块来解决这个问题。

然后我们可以通过调用CLI命令来运行Webpack:

./node_modules/webpack-cli/bin/webpack.js

这将读取src/app.js并编译成distndle.js。一旦命令完成,我们的项目应该如下所示:

dist/

bundle.js

src/

app.js

package.json

webpack.config.js

使用NPM脚本

简化构建CLI的常用策略是将自定义脚本添加到文件中的scripts属性中package.json。然后您可以使用这些脚本来调用npm run SCRIPT_NAME。

package.json在文本编辑器中打开文件并找到scripts部分:

默认配置package.json了一个调用的脚本test,它只是返回一条错误消息。我们再添加两个:

现在我们可以通过简单的调用来运行我们的Webpack构建npm run build。我们还添加了一个watch将--watch标志传递给的脚本webpack-cli。当用这个标志调用时,Webpack会监视我们的文件并在检测到变化时自动运行构建。

恭喜!您现在正在编写模块化JavaScript,并且您有一个构建过程,可以将它们放在一起。

下一步

我们仅仅在这里描述了这一点:Webpack的功能远不止于此,但捆绑JavaScript模块是其核心功能。下一次,我们将探索Webpack的加载器和插件,以优化您的JavaScript包,并使用开发服务器实时重新加载浏览器。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180503A1UJEX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券