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

最新推荐文章于 2024-05-17 16:07:53 发布

cuxiong8996

最新推荐文章于 2024-05-17 16:07:53 发布

阅读量246

点赞数 1

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

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

版权

bower 加速

为什么要使用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项目结构ToolsProject/apps/AmazingApp/.bowerrc使用，其内容如下：

{
    "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加载标签已重新添加。

结论

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

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

bower 加速

cuxiong8996

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bower 加速_使用Bower和Wiredep加速IBM MobileFirst Platform混合应用程序中的依赖关系包含

为什么要使用Bower和Wiredep？现代混合应用程序通常依赖于大量的库和框架，这可能会给开发团队带来许多问题，尤其是当团队中有很多成员时。问题可能包括：开发团队中依赖项版本的变化管理依赖项的下载和加载时的开销难以在源代码树中始终定位依赖项始终如一地将依赖项加载到应用程序中的困难源控制系统上的应用程序使用了过多的空间持续集成过程中过于复杂 ...
复制链接

扫一扫