在 Visual Studio 2010 中处理常见的 JavaScript 文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6107464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:29:21  来源:igfitidea点击:

Handling common JavaScript files in Visual Studio 2010

javascriptvisual-studio-2010

提问by isNaN1247

We're beginning work on a couple of fully JavaScript-dependent web apps (our previous apps have been ASP.NET MVC, with JavaScript 'goodness' sprinkled over-the-top).

我们正在着手开发几个完全依赖 JavaScript 的 Web 应用程序(我们之前的应用程序是 ASP.NET MVC,JavaScript 的“优点”洒在上面)。

We have a few files that will be shared across the board, and it would be nice to store these files in a Common project, and 'Add As Link' them into individual projects (as would be possible with compiled code).

我们有一些文件将被全面共享,最好将这些文件存储在一个公共项目中,并将它们“添加为链接”到单独的项目中(就像编译代码一样)。

Obviously this doesn't work with something like JavaScript as the file isn't actually 'there' in the correct location.

显然,这不适用于 JavaScript 之类的东西,因为该文件实际上不在正确的位置“存在”。

Does anyone have any suggestions on keeping a single version of a shared JavaScript file, for use across multiple projects?

有没有人对保留共享 JavaScript 文件的单个版本以供跨多个项目使用有任何建议?

采纳答案by isNaN1247

In the end, this is how I've achieved it. It may not be to everyone's taste - but worked a treat for me.

最后,这就是我实现它的方式。这可能不是每个人的口味 - 但对我来说是一种享受。

Note: In all of our projects, static resources are in a root directory called 'Assets', so for example JavaScript is always in /Assets/js/ and CSS /Assets/css/.

注意:在我们所有的项目中,静态资源都位于名为“Assets”的根目录中,因此例如 JavaScript 始终位于 /Assets/js/ 和 CSS /Assets/css/ 中。

Solution

解决方案

  1. In the project that is going to 'import' the common code, I simply add the common .js file 'As Link' within /Assets/js/.
  2. Go to that new addition's Properties and set 'Copy to Output Directory' to 'Copy if newer'.
  3. Now I simply edit the project's post-build event command line to the following: xcopy /Y /E "$(TargetDir)\Assets" "$(ProjectDir)\Assets"
  1. 在要“导入”通用代码的项目中,我只需在 /Assets/js/ 中添加通用 .js 文件“作为链接”。
  2. 转到新添加的属性并将“复制到输出目录”设置为“如果更新则复制”。
  3. 现在我只需将项目的构建后事件命令行编辑为以下内容: xcopy /Y /E "$(TargetDir)\Assets" "$(ProjectDir)\Assets"

When the project builds, it copies the imported files to \bin\Assets\js - the post-build event then takes a copy of those over to the project directory - in time for the site to use them.

当项目构建时,它会将导入的文件复制到 \bin\Assets\js - 构建后事件然后将这些文件的副本复制到项目目录 - 及时让站点使用它们。

回答by user1147862

I know this issue is ancient, but still wanted to put forward my solution because it is a bit simpler than beardtwizzle's.

我知道这个问题很古老,但还是想提出我的解决方案,因为它比beardtwizzle的简单一些。

You can ensure that Visual Studio copies all linked files to where you placed the link in Visual Studio's Solution Explorer by adding this at the end of your .csproj file:

您可以通过在 .csproj 文件末尾添加以下内容,确保 Visual Studio 将所有链接文件复制到您在 Visual Studio 的解决方案资源管理器中放置链接的位置:

  <Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
    <Copy SourceFiles="%(Content.Identity)" 
          DestinationFiles="%(Content.Link)" 
          SkipUnchangedFiles='true' 
          OverwriteReadOnlyFiles='true' 
          Condition="'%(Content.Link)' != ''" />
  </Target>

I've described how this works in my blog post at http://mattperdeck.com/post/Copying-linked-content-files-at-each-build-using-MSBuild.aspx

我在http://mattperdeck.com/post/Copying-linked-content-files-at-each-build-using-MSBuild.aspx 的博客文章中描述了它是如何工作的

回答by Will D

I can also see this question is ancient, but thought I would add my two cents...

我也可以看到这个问题很古老,但我想我会加上我的两分钱......

I have a javascript file in a separate project. I added a linked reference and this works well for publishing, but doesn't work in IIS Express or Casinni. I tried adding custom routing to catch the missing file and manually remap it, but it is bit of a hack and for some reason stopped working when I upgraded to MVC 5.1, so rather than fix the hack, I found a better way:

我在一个单独的项目中有一个 javascript 文件。我添加了一个链接引用,这对发布很有效,但在 IIS Express 或 Casinni 中不起作用。我尝试添加自定义路由来捕获丢失的文件并手动重新映射它,但它有点破解,并且在我升级到 MVC 5.1 时由于某种原因停止工作,所以我没有修复破解,而是找到了一个更好的方法:

System.Web.Optimizationhas javascript bundles.

System.Web.Optimization有 javascript 包。

In your shared project, set the Copy To Output Directoryto 'Copy Always' and Build Actionto 'Content' on your js file. This means your js files end up in the bin folder of your website project. They cannot be served from there (IIS wont serve anything in the bin folder for obvious security reasons), but they can be included in bundles

在您的共享项目中,在您的 js 文件中将 设置Copy To Output Directory为“始终复制”和Build Action“内容”。这意味着您的 js 文件最终位于您网站项目的 bin 文件夹中。它们无法从那里提供(出于明显的安全原因,IIS 不会在 bin 文件夹中提供任何内容),但它们可以包含在捆绑包中

using System.Web;
using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {   
        bundles.Add(new ScriptBundle("~/bundles/externalLibrary").Include(
                    "~/bin/scripts/externalLibrary.js"
                    ));
    }
}

You then need to add this to Application_Start in your global.asax file (right next to register routes)

然后,您需要将其添加到 global.asax 文件中的 Application_Start(在注册路由旁边)

BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

then use your bundle link this in your razor cshtml:

然后在您的 razor cshtml 中使用您的捆绑链接:

<script type='text/javascript' src='@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/externalLibrary")'></script>

you will need the nuget package for microsoft.aspnet.web.optimization

您将需要microsoft.aspnet.web.optimization的 nuget 包

回答by Kamyar

The correct solution is embedding javascript/css files in your project. You can do this by using WebResources.axd. This is the official way microsoft embeds js in its controls. (Like validation controls)

正确的解决方案是在您的项目中嵌入 javascript/css 文件。您可以通过使用WebResources.axd来做到这一点。这是微软在其控件中嵌入 js 的官方方式。(如验证控件)

You can find a good tutorial on: http://www.4guysfromrolla.com/articles/080906-1.aspx

你可以找到一个很好的教程:http: //www.4guysfromrolla.com/articles/080906-1.aspx

回答by Alex KeySmith

You could perhaps use visual studio templates

您也许可以使用Visual Studio 模板

回答by Blowsie

great question, I've been thinking about this for quite some time. The only solutions that have popped up in my mind are hosting the files on the web and using them like a cdn or using symlinks. You could add a code snippet into your visual studio to reference them.

很好的问题,我已经考虑了很长一段时间。我想到的唯一解决方案是将文件托管在网络上并像 CDN 一样使用它们或使用符号链接。您可以将代码片段添加到您的 Visual Studio 中以引用它们。

回答by Eric Wardell

Anyone that stumbles across this question here in the future should know that there are now Shared Projects in Visual Studio to solve this problem. Universal Windows projects use them by default and you can create your own by downloading and installing the VS extension here: https://visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450

以后在这里遇到这个问题的任何人都应该知道,现在 Visual Studio 中有 Shared Projects 来解决这个问题。通用 Windows 项目默认使用它们,您可以通过在此处下载和安装 VS 扩展来创建自己的项目:https: //visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450

Once you download the extension you can add a Shared Project (Empty) to your solution. The project can be found in the project templates for Visual C#, Visual C++, and JavaScript.

下载扩展后,您可以将共享项目(空)添加到您的解决方案中。该项目可以在 Visual C#、Visual C++ 和 JavaScript 的项目模板中找到。

Then include the files you want to share to the shared project in any folder structure that makes sense for you.

然后将要共享到共享项目的文件包含在对您有意义的任何文件夹结构中。

Next you will include the shared project as a shared reference in the other projects in that solution that need access to the shared files. Right-click the other project and choose "Add Shared Project Reference".

接下来,您将共享项目作为共享引用包含在该解决方案中需要访问共享文件的其他项目中。右键单击另一个项目并选择“添加共享项目引用”。

Now you can reference the shared files in your main project as if the files in the shared project existed there. They are compiled as part of that project.

现在您可以引用主项目中的共享文件,就好像共享项目中的文件存在于那里一样。它们被编译为该项目的一部分。

The technology was intended for Universal apps to share code between Windows Phone and Windows Store apps so be warned that you may have trouble sharing in different scenarios but it is worth a try to see if it will fill your need.

该技术旨在让通用应用程序在 Windows Phone 和 Windows 应用商店应用程序之间共享代码,因此请注意,您可能在不同情况下无法共享代码,但值得一试,看看它是否能满足您的需求。

回答by stefan.s

This blog post describes an alternative solution to the answer by @beardtwizzle:

这篇博文描述了@beardtwizzle 回答的替代解决方案:

http://consultingblogs.emc.com/jamesdawson/archive/2008/06/03/using-linked-files-with-web-application-projects.aspx

http://consultingblogs.emc.com/jamesdawson/archive/2008/06/03/using-linked-files-with-web-application-projects.aspx

The idea is similar:

这个想法是相似的:

  1. Add the shared file to to web project as a link
  2. Modify the _CopyWebApplication build step in the project, so that the linked files are copied correct destination path.
  1. 将共享文件作为链接添加到 Web 项目
  2. 修改项目中的 _CopyWebApplication 构建步骤,以便将链接的文件复制到正确的目标路径。

So instead of a post build event the files are copied by a modified build step. For me this solution feels a little bit cleaner (but this may well be a matter of taste). Anyway I just added this to our solution and it works great so far!

因此,不是后期构建事件,而是通过修改后的构建步骤复制文件。对我来说,这个解决方案感觉更干净(但这很可能是一个品味问题)。无论如何,我只是将它添加到我们的解决方案中,到目前为止效果很好!

回答by Raynos

Use proper version control.

使用适当的版本控制。

Keep the js in one location and then just git pull(or the equivelant Mercurial / Bazaar) them back into your code whenever you've updated your javascript.

将 js 保留在一个位置,然后git pull在更新 javascript 时将它们(或等效的 Mercurial / Bazaar)放回您的代码中。