五、库和框架

本章介绍应用如何与库和框架一起工作。许多框架和库都使用 Webpack。通常，这些都是 JavaScript 框架。它们越来越成为编程的核心部分，知道如何将它们集成到您的应用捆绑包中可能是一个越来越大的需求。

使用库和框架与使用其他 Webpack 元素有点不同。通过遵循典型的例子和用例，这本书将探索 Angular 以及如何构建 Angular 框架来促进包捆绑。这包括对网络包捆绑的期望、期望的结果、优势和局限性。

完成本章后，您应该对如何将这些主要框架和库与 Webpack 一起使用充满信心。您还将知道如何集成和安装它们，以及如何在集成中使用最佳实践。

在本章中，我们将涵盖以下主题:

  • 最佳实践
  • 使用 JSON
  • 与 YAML 合作
  • 使用 Angular
  • 与 Vue.js 合作

最佳实践

到目前为止，我们只讨论了构建香草 JavaScript，这不应该与香草框架混淆。尽管这是最好的学习方式，但更有可能的是，你会使用某种框架。Webpack 将与任何 JavaScript 或 TypeScript 框架一起工作，包括 Ionic 和 jQuery 然而，更棘手的框架包括 Angular、Vue 和 YAML。

现在，我们将了解 YAML，但是在深入研究之前，您可能想知道后端框架是否可以集成。简单的答案就是可以，但是不捆绑。然而，唯一的集成级别是通过链接源代码，就像我们对大多数项目或应用编程接口(如 REST 应用编程接口)所做的那样。

正如我们已经讨论过的，Webpack 有一种生产和开发模式。生产模式将您的项目捆绑到它的完成状态，为网络交付或发布做好准备，并且提供很少的调整空间。开发模式赋予开发人员修改数据库连接的自由；后端就是这样集成的。您的项目后端可能是ASP.NET或 PHP ，但有些后端更复杂，使用OpenAuth。作为一名开发人员，您需要对所有这些进行概述。然而，本指南只涉及网络包。

请放心，所有这些框架都将集成，这是通过 REST API 完成的，REST API 以 JavaScript 对象符号 ( JSON )格式返回数据。使用 AJAX 也可以做到这一点。无论如何，请确保遵循安全的最佳实践，因为对数据库的 JSON 调用不如使用服务器端脚本安全。

If your project uses Ionic, then you should follow the instructions for Angular as the Ionic framework is based on this.

这将为您提供使用后端和库的最佳实践的可靠概述。我们现在将讨论您在网络包中会遇到的最常见的每个库。让我们从 JSON 开始，因为它是最容易理解的，也是外部或后端代码和数据库与您的 Webpack 应用交互的最重要的方式。

使用 JSON

大多数时候，当您使用框架时，您需要跨语言和应用之间进行通信。这是用 JSON 完成的。JSON 在这方面的工作方式与 YAML 类似，但是首先要理解 Webpack 如何与 JSON 一起工作要容易得多。

JSON 文件被 Webpack 的编译器理解，而不需要专用的加载器，因此，可以被视为 Webpack bundler 的本机脚本，就像 JavaScript 一样。

正如本指南到目前为止所提到的，JSON 文件被工具化地用于包合成。Webpack 如何记录和跟踪加载器和依赖项的使用是通过 JSON 文件形式的模式来实现的。这通常是package.json文件，或者有时是package.lock.json文件，它记录了每个安装的软件包的确切版本，以便可以重新安装。在这种情况下，“包”统称为加载器和依赖项。

每个 JSON 文件都必须正确编程，否则 Webpack 无法读取。与 JavaScript 不同，代码中不允许使用注释来指导用户，因此您可能希望使用README文件向用户解释其内容和目的。

JSON 文件的结构与 JavaScipt 有点不同，包含不同的元素数组，例如键。以下面的代码块为例:

module: {
    rules: [{
    test: /\.yaml$/,
    use: 'js-yaml-loader',
    }]
}

这是package.json文件的摘录，我们将在本章稍后使用。这个块的内容本质上声明了模块的参数。命名模块用作关键字，其后带有冒号。这些键有时被称为名称，它们是放置选项的地方。这段代码设置了一系列的规则，在这条规则中是让 Webpack 在传输内容模块时使用js-yaml-loader的指令。

您必须确保以正确的顺序使用大括号和方括号，否则 Webpack 将无法读取代码。

作为一名 JavaScript 开发人员，您可能非常熟悉 JSON 及其使用方式。不过，万一有什么盲点，还是值得一说的。YAML 是一个更复杂的框架，但它是你经常会遇到的东西，所以它只是比 JSON 越来越复杂。让我们现在开始着手处理吧。

与 YAML 合作

YAML 是一个通用框架，其使用方式与 JSON 相似。不同的是，YAML 更常用于配置文件，这就是为什么在使用 Webpack 时，您可能会更频繁地或第一次遇到它。

要在网络包中使用 YAML，我们必须安装它。让我们开始吧:

  1. 您可以在命令行实用程序中使用npm安装 YAML。使用以下命令:
yarn add js-yaml-loader

注意yarn语句。这指的是预装了Node.js的 JavaScript 文件的开源包管理器。它的工作原理与npm相似，应该是预装的。如果您没有从这里使用的代码中得到响应，请再次检查它是否已预安装。

  1. 要从命令行界面检查您的 YAML 文件，您应该全局安装它们:
npm install -g js-yaml
  1. 接下来，打开配置文件webpack.config.js，进行如下修改:
import doc from 'js-yaml-loader!./file.yml';

前一行将返回一个 JavaScript 对象。此方法对于不可信的数据是安全的。有关 GitHub YAML 的示例，请参见进一步阅读部分。

  1. 之后，使用webpack.config.js配置文件以允许使用 YAML 加载器:
module: {
    rules: [{
    test: /\.yaml$/,
    use: 'js-yaml-loader',
    }]
}

您可能还想在网络包中使用 YAML 前置任务加载器。这是一个麻省理工学院许可的软件，可以将 YAML 文件转换成 JSON，如果你更习惯于使用后者，这将特别有用。如果你是一个 JavaScript 开发人员，很可能你已经习惯了使用 JSON，因为它比 YAML 更常用于 JavaScript。

此模块至少需要在您的设备上安装 Node v6.9.0 和 Webpack v4.0.0。Webpack 5 是本指南的主题，所以应该不会有问题。但是，请注意，该功能仅适用于 Webpack 4 和 5。

以下步骤与前面的步骤是分开的，因为它们处理的是yaml-loader的安装，而不是yaml-frontmatter，后者用于将 YAML 转换为 JSON 文件(这是更典型的 Webpack 包结构):

  1. 首先，您需要使用命令行实用程序安装yaml-frontmatter-loader:
npm install yaml-frontmatter-loader --save-dev

这个特定的命令行在语法上可能与本指南过去所展示的不同，但是无论格式如何，这个命令都应该可以工作。

  1. 然后，将加载程序添加到您的配置中，如下所示:
const json = require('yaml-frontmatter-loader!./file.md');

这段代码将把file.md文件作为一个 JavaScript 对象返回。

  1. 接下来，再次打开webpack.config.js并对rules键进行以下更改，确保您参考了 YAML 装载机:
module.exports = {
  module: {
    rules: [
      {
         test: /\.md$/,
         use: [ 'json-loader', 'yaml-frontmatter-loader' ]
      }
    ]
  }
}
  1. 接下来，通过您喜欢的方法运行 Webpack 5 并查看结果！

如果你完整地度过了这一关，你可能会觉得自己有足够的勇气去解决 Angular。这是一个更难处理的框架，所以让我们开始吧。

使用 Angular

Angular 是一个库和框架，和所有框架一样，它旨在使构建应用变得更容易。Angular 利用依赖注入、集成的最佳实践和端到端工具，所有这些都有助于解决开发挑战。

有角度的项目经常使用 Webpack。撰写本文时，正在使用的 Angular 最新版本为 Angular 9 。每年都会推出一个更新版本。

现在，让我们看看当捆绑 Angular 项目或者甚至将 Angular 连接到现有项目时，Webpack 是如何工作的。

Angular 查找window.jQuery以确定 jQuery 是否存在。有关源代码，请参见下面的代码块:

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

要添加一个lodash映射，将现有代码追加如下:

new webpack.ProvidePlugin({
  _map: ['lodash', 'map']
});

网络包和 Angular 通过向网络包提供入口文件并让它包含从这些入口点引出的依赖关系来工作。以下示例中的入口点文件是应用的根文件— src/main.ts。让我们来看看:

  1. 我们需要在这里使用webpack.config.js文件。请注意，这是一个单一的入口点流程:
entry: {
 'app': './src/main.ts'
},

Webpack 现在将解析该文件，检查它，并递归遍历其导入的依赖项。

  1. 在src/main.ts中进行以下更改:
import { Component } from '@angular/core';
@Component({
 selector: 'sample-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent { }

Webpack 将识别出@angular/core文件正在被导入，因此这将被添加到依赖列表中以包含包。Webpack 将打开@angualar/core文件并跟踪其一系列import语句，直到根据它构建依赖图。这将从main.ts(一个类型脚本文件)构建。

  1. 这些文件将作为输出提供给配置中标识的app.js捆绑文件:
output: {
 filename: 'app.js'
}

包含源代码和依赖项的 JavaScript 文件是一个单独的文件，输出包是app.js文件。稍后将在index.html文件中加载一个 JavaScript 标记(<script>)。

出于显而易见的原因，建议您不要对所有内容都使用一个巨大的包。因此，建议将易失性应用代码与更稳定的供应商代码模块分开。

  1. 应用和供应商代码的这种分离是通过更改配置来实现的，因此现在使用了两个入口点— main.ts和vendor.ts—如图所示:
entry: {
 app: 'src/app.ts',
 vendor: 'src/vendor.ts'
},
output: {
 filename: '[name].js'
}

通过构建两个独立的依赖图，从 Webpack 中发出两个包文件。第一个叫app.js，第二个叫vendor.js。每个都分别包含应用代码和供应商依赖项。

在前面的示例中，file name: [name]表示占位符，该占位符被网络包插件、应用和供应商的条目名称替换。插件在下一章会有更详细的介绍，所以如果你卡住了，也许标记一下这个页面，然后再回来。

  1. 现在，通过添加一个只导入第三方模块的vendor.ts文件来指示 Webpack 哪些部分属于供应商捆绑包，如下面的代码所示，其中显示了vendor.ts : 的内容示例
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';

注意提到rxjs。这是一个反应式编程库，旨在使开发人员更容易编写异步代码或回调。

其他厂商也可以这样导入，比如 jQuery、Lodash 、和 Bootstrap。也可以导入的文件扩展名包括 JavaScript 文件(.js)、 TypeScript 文件(.ts)、层叠样式表文件(.css)和语法牛逼样式表文件(.sass)。

Angular 可能是一个非常复杂的框架，并且与基于 web 的应用非常相关。然而，您的特殊需求可能更适合单页应用，在这种情况下，Vue.js 将是大多数应用的首选。我们现在来看看。

与 Vue.js 合作

Vue.js 是另一个框架，但它是开源的。其使用的显著性，或者说有明确目的的领域，在于单页应用 ( SPAs )。这是因为该框架侧重于提供无缝的体验，但比 Angular 的功能少，Angular 可以与许多其他语言一起工作，并且仍然运行非常快。用 Vue.js 构建相当大的应用会导致在使用过程中加载非常慢，甚至编译速度更慢。

也许理解这一点的最好方法是考虑 jQuery，以及它如何使用内联语句在脚本中调用页面，而 Angular 使用核心模块，每个模块都有特定的用途。Vue.js 介于纯 jQuery 和简单 Jquery 之间。

在 Vue.js 项目中使用 Webpack 是通过使用专用的加载器来完成的。

建议安装vue-loader和vue-template-compiler，除非你是 Vue.js 模板编译器的高级用户。请遵循以下步骤:

  1. 要遵循此示例，首先用以下代码安装vue-loader和vue-template-compiler:
npm install -D *vue-loader vue-template-compiler*

模板编译器必须单独安装，以便可以指定版本。

Vue.js 在每个新版本中都发布了相应版本的模板编译器。这两个版本必须同步，以便加载程序生成运行时兼容的代码。所以，每次升级一个，就应该升级另一个。

与 Vue.js 相关联的加载器与大多数加载器的配置略有不同。在处理扩展名为.vue的文件时，请确保将 Vue.js 加载程序的插件添加到您的 Webpack 配置中。

  1. 这是通过改变网络包的配置来实现的，如下例所示，使用webpack.config.js:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 module: {
 rules: [
 // other rules
 {
   test: /\.vue$/,
   loader: 'vue-loader'
  }
 ]
},
 plugins: [
 // make sure to include the plugin.
 new VueLoaderPlugin()
 ]
}

这个插件是必需的，因为它负责克隆定义的语言并将它们应用于对应于.vue文件的语言块。

  1. 使用 Vue.js，我们添加以下内容:
new webpack.ProvidePlugin({ Vue: ['vue/dist/vue.esm.js', 'default'] });

当与 bundlers 一起使用时，必须添加前面的代码，因为它包含 Vue.js 的 ECMAScript 模块的完整安装。这应该出现在您项目的npm包的/dist文件夹中。注意.ems.表示 ECMAScript 模块。Vue.js 安装页面上显示了仅运行时和特定于生产的安装方法，可在本章的进一步阅读部分获得。 UMD 和 CommonJS 安装类似，分别使用vue.js和vue.common.js文件。

由于我们的项目将使用.esm格式，了解更多信息可能会有所帮助。它被设计为静态分析，这允许打包员执行摇树，这是消除未使用的代码。请注意，bundlers 的默认文件是pkg.module，它负责仅运行时的 ECMAScript 模块编译。有关更多信息，请参见 Vue.js 安装页面—该网址可在本章的进一步阅读部分获得。

本章关于框架和库的内容到此结束。现在，您应该能够很好地处理复杂的项目，这些项目甚至可能使用多个框架。

摘要

本章介绍了典型的框架以及如何开始使用它们。这包括应遵循的安装流程以及需要的标准和外围设备。本指南关注最佳实践和安全性。当您开始您的项目时，您应该提前遵循这些示例，密切关注过程、警告和要求。

本指南向您概述了其他框架，例如用于回调和 jQuery 的 RxJS，并在使用不寻常的文件扩展名时为您指明了正确的方向。我们还探讨了在使用 Webpack 5 时 Angular 的核心功能和 Vue.js 的使用和安装过程，以及 Vue.js 如何更好地适合单页应用，以及 Angular 如何更好地在大型项目中工作。

已经讨论了大部分核心主题，在下一章中，我们将深入研究部署和安装。当使用数据库并确保安全要求得到满足时，这将变得更加重要。下一章将深入介绍这个主题，并有望解决您作为开发人员可能会有的任何顾虑。

进一步阅读

问题

  1. 什么编译器需要对应正在使用的Vue.js版本？
  2. 使用 Angular 时，本指南建议将易变代码和稳定的供应商代码分开。这是使用两个入口点完成的。它们是什么？
  3. 将 YAML 与网络包一起使用时，最低安装要求是什么？
  4. 为什么要在全球范围内安装 YAML 文件？
  5. 什么是 SPA？
  6. 处理.vue文件时，应该在哪里添加 Vue.js 的加载器？
  7. 下面一行代码缺少什么: import 'angular/http';
  8. 使用 Angular 时，app.js是如何加载的？
  9. 什么是纱？
  10. 默认的pkg.module文件用于什么？

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/1055.html