javascript - "require"或 "import"模块化 javascript ASP.Net MVC 5、Visual Studio 2015 的最简单方法

Question

我想做的就是能够模块化我的 javascript/jquery/ajax 客户端代码，使用我已经编写的一些现有库代码，现在想在我的页面的脚本部分中使用 - 使用一些简单的东西，比如 Node“require”或 ES6“import”语法。

[ASP.Net MVC 5、Visual Studio 2015]

在网页中:

@section scripts
{

    @Scripts.Render("~/Scripts/Views/Items/Index.js")

}

在 Index.js 中:

$(function ()
{
    var myLib = require("../Shared/my-lib");

或者

$(function ()
{
   import * from "../Shared/my-lib";

在 my-lib.js 中:

export var myFunction1 = myFunction1;
export var myFunction2 = myFunction2;

我是一位经验丰富的 .NETter，但有点 js 菜鸟，所以如果我遗漏了任何明显的内容，请告诉我!我只是想让它保持干燥，你知道吗？

我尝试按照上面的方法进行操作，但它会引发有关“import”或“require”的语法错误，所以我认为它不仅仅可以开箱即用。

我查阅了 Browserify 和 RequireJS - 但这似乎是一大堆繁琐的设置(是的，我对 npm 很好，但它是所有设置文件、构建文件、编写库代码的特定方式......等等.等)-我真的必须做所有这些只是为了“包含”/导入一些代码吗？

我应该将我的库编写为 OO javascript 吗？这会有帮助吗？

目前我正在做:

 <script src="@Url.Content("~/Scripts/Views/Shared/my-lib.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/Views/Item/Index.js")" type="text/javascript"></script>

我觉得这不太优雅......

Answer 1

取决于您要维护的文件数量以及这些文件之间的依赖关系。如果这只是几个文件，那么您可以简单地包含它们，就像您已经做的那样，并将重复的代码放入 JS 模块中(当然是按顺序)以保持代码干燥。

例如

var myLib = (function(){
    var privateVar = 1;

    var method1 = function(){
    };
    // export
    return {
        method1: method1
    }
})();

此外，使用 jQuery，如果需要，您可以随时使用 $.getScript 有条件地加载 JavaScript。因此您可以根据当前页面路由、名称等仅加载特定的 JS 文件。

但是如果我们正在谈论更多的 JS 文件(即使只有 10 个文件/JS 模块，如果考虑更复杂的依赖关系场景，项目的维护也会变得相当困难例如file1依赖于file2，file4依赖于file3和file2等) 。在这种情况下，绝对值得将时间投入到一些AMD上。框架如 RequireJS 。其他框架如 Angular 有自己的 modularization功能，并且这些功能实际上可以与 RequireJS 共存，正如所讨论的 here 。

此外，很多时候项目一开始看起来很简单，但后来发展得出乎意料地快。不过，这取决于您的决定。

您还可以考虑一些现有的 nuget包如 RequireJS.Net帮助您集成到 ASP.NET MVC 项目中。

顺便说一句。就导入和导出而言 - 如 docs 中所述:

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.