前言:
我知道了, 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 使用内置于代码中的依赖性逻辑.
编写模块化代码
为了让 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, 并且您有一个构建过程, 可以将它们放在一起.
学习交流前端方面的技术, 打算深入了解这个行业的朋友, 可以加下小编的前端学习裙 330336289, 邀请码 (寂静)
每天都有大咖给大家分享前端学习知识和路线方法, 欢迎小伙伴加入交流
下一步
我们仅仅在这里描述了这一点: Webpack 的功能远不止于此, 但捆绑 JavaScript 模块是其核心功能. 下一次, 我们将探索 Webpack 的加载器和插件, 以优化您的 JavaScript 包, 并使用开发服务器实时重新加载浏览器.
来源: http://www.jianshu.com/p/e2f93a00734a