bower 加速_使用Bower和Wiredep加速IBM MobileFirst Platform混合应用程序中的依赖关系包含

最新推荐文章于 2024-09-05 09:23:54 发布

cusi77914

最新推荐文章于 2024-09-05 09:23:54 发布

阅读量461

点赞数

文章标签： java python linux vue 数据库 ViewUI

原文链接：https://www.ibm.com/developerworks/websphere/library/techarticles/1503_maynard/1503_maynard.html

版权

为什么要使用Bower和Wiredep？

现代混合应用程序通常依赖于大量的库和框架，这可能会给开发团队带来许多问题，尤其是当团队中有很多成员时。问题可能包括：

开发团队中依赖项版本的变化
管理依赖项的下载和加载时的开销
在源代码树中始终难以找到依赖项的困难
始终如一地将依赖项加载到应用程序中的困难
源控制系统上的应用程序使用了过多的空间
持续集成过程中过于复杂

Bower和wiredep可以缓解这些问题。

Bower有助于规范，下载和管理依赖项的版本和文件，可以选择从源代码控制系统中删除其文件。
通过确保始终加载Bower安装的依赖项， wiredep对Bower 表示赞赏。

本教程的先决条件

您应该安装了IBM MobileFirst命令行工具。您将使用它们来创建项目，应用程序和环境。
或者，您仍然可以使用IBM MobileFirst Studio。下载IBM MobileFirst Studio开发人员版。
您应该熟悉使用IBM MobileFirst Platform创建混合应用程序的基础知识。
本教程中使用的工具依赖于最新版本的Node.js，您可以从nodejs.org下载。要验证是否正确安装了Node.js，请打开一个终端并输入node -v 。如果已正确安装，则会看到版本号，例如v0.10.33 。

安装工具

Node.js是命令行驱动的。打开一个终端，然后使用以下命令使用节点包管理器来全局安装所需的Node.js包：

npm install –g wiredep bower

入门

创建一个新的名为MobileFirst项目ToolsProject并命名为混合应用程序AmazingApp 。将Android环境添加到应用程序：

mfp create ToolsProject
cd ToolsProject
mfp add hybrid AmazingApp
cd apps/AmazingApp

从现在开始，执行ToolsProject/apps/AmazingApp目录中的所有命令。

初始化Node.js项目

初始化一个新的Node.js项目：

npm init

按照提示操作-接受默认值就可以了。为您的应用程序创建了一个新的package.json文件。

初始化Bower项目

初始化一个新的Bower项目：

bower init

按照提示进行操作-与Node.js项目初始化一样，接受默认值也可以。为您的应用程序创建了一个新的bower.json文件。

通过创建名为ToolsProject/apps/AmazingApp/.bowerrc的文件，将Bower配置为使用MFP项目结构，其内容如下：

{
    "directory": "common/bower_components"
}

该文件指示Bower将软件包安装在目录common/bower_components 。

添加凉亭包

您现在可以将Bower软件包添加到您的项目中-种类繁多。 Bower目录中提供了大多数Web框架。出于演示目的，安装引导程序框架-对于许多项目来说，这是一个很好的起点：

bower install --save bootstrap

运行此命令时，您会注意到安装了一个名为jQuery的附加软件包，因为Bootstrap依赖于它。 Bower会尝试自动解决这些依赖关系，并且仅在发生任何冲突时才会向您查询解决方案。与NPM不同，Bower将所有软件包作为兄弟安装在bower_components目录中。这样做会增加冲突的机会，但是会减少安装的软件包的数量。

自动将CSS和JS标签插入HTML

现在，您的Bower软件包已安装，您可以将它们手动添加到应用程序HTML文件中。为避免手动干预，您可以在从应用程序添加或删除其他Bower软件包时，使用wiredep自动执行此过程。 Wiredep使您可以将Bower依赖项关联到源代码中。

增强index.html

编辑您的common/index.html文件，并添加占位符以供wiredep使用，如下所示：

<html>
<head>
    <!-- pre-existing <head> content -->
    <!-- New lines to support wiredep -->
    <!-- bower:css -->
    <!-- endbower -->
</head>
<body>
    <!-- pre-existing <body> content -->
    <!-- New lines to support wiredep -->
    <!-- bower:js -->
    <!-- endbower -->
</body>
</html>

手动运行wiredep

您现在可以使用以下命令注入Bower依赖项：

wiredep --verbose --bowerJson bower.json --src common/index.html

如果打开common/index.html ，则会看到wiredep插入了HTML标记以加载Bower软件包公开的JS和CSS资源。

创建一个NPM脚本条目

上面的命令太复杂了，难以记住，因此请创建一个快捷方式以备后用。编辑package.json文件，并使用脚本条目对其进行扩充，如下所示：

{
    "scripts": {
        "wiredep": "wiredep --verbose --bowerJson bower.json --src common/index.html"
    }
}

从现在开始，您只需输入npm run wiredep runwiredep即可npm run wiredep 。

自动运行wiredep

您可以将Bower配置为在安装软件包时自动运行cableep。编辑您先前创建的.bowerrc文件，并使用后安装脚本对其进行扩充，如下所示：

{
    "scripts": {
        "postinstall": "wiredep --verbose --bowerJson bower.json --src common/index.html"
    }
}

测验

删除并重新添加Bower依赖项，以验证wiredep是否按预期工作。首先，删除依赖项并更新index.html文件：

bower uninstall --save bootstrap
npm run wiredep

检查您的common/index.html文件，您将看到JS和CSS加载标记已被删除。接下来，重新添加依赖项。 Bower安装后脚本将自动更新index.html文件：

bower install --save bootstrap

检查您的common/index.html文件-您将看到JS和CSS加载标签已重新添加。

结论

在本教程中，您学习了如何使用Bower和wiredep在IBM Mobile First Platform上管理混合Web应用程序中的依赖关系。

翻译自: https://www.ibm.com/developerworks/websphere/library/techarticles/1503_maynard/1503_maynard.html