如何使用Visual Studio配置bower？

Question

随着我的Web项目的复杂性不断增加,我意识到手动下载外部JavaScript库非常容易出错,耗时并且随着时间的推移使项目的可维护性降低.

虽然Visual Studio有NuGet包管理器,但它没有bower那么强大.并非所有外部库都在NuGet上发布.

但是如何使用Visual Studio配置bower没有明确的帮助.请帮忙 !

Answer 1

随着我的Web项目的复杂性的增长,我意识到手动下载外部JavaScript库容易出错,耗时并且随着时间的推移使项目的可维护性降低.

虽然Visual Studio有NuGet包管理器,但它没有bower那么强大.并非所有外部库都在NuGet上发布.

所以,我决定采取措施,开始使用凉亭.

我的项目结构现在更加清洁,易于维护.

在这里我列出了步骤,我们需要用Visual Studio配置bower.

使用凉亭的详细步骤已在http://bower.io/#install-bower上提供.在这里,我将列出步骤,我接受了

• - 安装凉亭

• - 使用Visual Studio配置它

• - 下载示例包 - (AngularJS)

Bower需要node,npm和git for windows.

在继续之前,请安装以下内容

• git for windows - 从https://msysgit.github.io/安装
• 节点 - 从https://nodejs.org/安装
• npm是节点的一部分(不需要任何额外的步骤)

步骤1

打开命令提示符并执行命令

npm install -g bower

如果您落后于公司代理服务器,则上述步骤可能会失败.要在npm中添加代理服务器设置,请从命令提示符执行以下2个命令

npm config set proxy http://proxy.myCompany.com:80

npm config set https-proxy http://proxy.myCompany.com:80

完成后,再次尝试安装凉亭

第2步

从命令提示符导航到Visual Studio Project文件夹.

执行命令

bower init

• 将此文件包含在Visual Studio项目中.您可能必须单击解决方案资源管理器菜单中的"显示所有文件".

第3步

使用带有以下配置的记事本创建.bowerrc文件,并将其保存在Visual Studio Project文件夹中

{
"directory": "scripts/bower_components",
"proxy":"http://proxy.myCompany.com:80",
"https-proxy":"http://proxy.myCompany.com:80"
}

• 将此文件包含在Visual Studio项目中.
• 编辑此文件以设置要由凉亭下载的包的目录
• 如果您在公司代理后面工作,请添加代理服务器设置.否则删除代理和https代理的最后2行

第4步

要下载AngularJs,请执行命令

bower install angular –save

这将在bower.json中添加一行.

第五步

默认情况下,包将在bower_components目录下下载.(或在.bowerrc文件中提到的目录下)

确保在Visual Studio项目中包含整个包目录.

• 单击"显示所有文件"
• 右键单击新下载的软件包,然后单击"包含在项目中"

第6步

最后将新包的引用添加到index.html