2016-10-03 99 views
0

我正在嘗試使用Gulp和SystemJS-Builder將我的項目構建爲自執行包(SFX)。當我運行我的gulp任務時,我不斷收到錯誤,「窗口未定義」。我研究了這個問題並找不到解決方案。SystemJS Builder - 未定義窗口

這是我一飲而盡構建文件

var gulp = require('gulp'); 
var path = require('path'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 
var Builder = require('systemjs-builder'); 

gulp.task('bundle:js', function() { 
    var builder = new Builder('MyApplication/application/source', 'MyApplication/application/source/config.js'); 

    return builder.buildStatic('MyApplication/application/source/app.js', 'MyApplication/application/js/Site.min.js', { 
     format: "amd" 
    }); 
}); 

這裏是我的SystemJS配置:

(function() { 

    window.define = System.amdDefine; 
    window.require = window.requirejs = System.amdRequire; 

    var kendoVersion = "2016.3.914"; 

    var map = { 
     text: "../Scripts/text.js", 
     app: "app.js", 
     main: "main.js", 
     aes: "../../../Scripts/aes.js", 
     jquery: "../../../Scripts/kendo/" + kendoVersion + "/jquery.min.js", 
     kendo: "vendor/kendo/kendo.js", 
     DataTables: "../../../Scripts/DataTables/datatables.js", 
     k: "../../../Scripts/kendo/" + kendoVersion + "/", 
     bootstrap: "../../../Scripts/bootstrap.js", 
     lodash: "../../../Scripts/lodash.js", 
     moment: "../../../Scripts/moment.js", 
     ajaxSetup: "security/ajaxSetup.js", 
     q: "../../../Scripts/q.js", 
     toastr: "../../../Scripts/toastr.js", 
     wizards: "viewmodels/shared", 
     'kendo.core.min': "../../../Scripts/kendo/" + kendoVersion + "/kendo.core.min.js" 
    }; 

    var paths = { 
     'kendo.*': "../../../Scripts/kendo/" + kendoVersion + "/kendo.*.js", 
     jquery: "../../../Scripts/kendo/" + kendoVersion + "/jquery.min.js", 
     bootstrap: "../../../Scripts/bootstrap.js" 
    }; 

    var meta = { 
     app: { deps: ["kendo", "jquery"] }, 
     main: { deps: ["jquery"] }, 
     jquery: { exports: ["jQuery", "$"], format: "global" }, 
     kendo: { deps: ["jquery"] }, 
     bootstrap: { deps: ["jquery"] }, 
     'kendo.core.min': { deps: ["jquery"] }, 
     DataTables: { deps: ["jquery"], exports: "$.fn.DataTable" }, 
     toastr: { deps: ["jquery"] } 
    }; 

    var packages = { 
     pages: { 
      main: 'views/*.html', 
      format: 'amd', 
      defaultExtension: 'html' 
     } 
    }; 

    var config = { 
     baseURL: "application/source", 
     defaultJSExtensions: true, 
     packages: packages, 
     map: map, 
     paths: paths, 
     meta: meta 
    }; 

    System.config(config); 
    System.import("main"); 

})(this); 

我加載SystemJS在我的索引頁。這是我Index.cshtml頁

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>My Application</title> 
    <meta name="description" content=""/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> 
    @Styles.Render("~/application/css/site.min.css") 
    <script src="@Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/localStoragePolyFill.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/system.js")" type="text/javascript"></script> 
</head> 
<body> 

    @Html.AntiForgeryToken() 
    <div id="applicationHost" class="page-wrap"> 

     <!-- The application is rendered here --> 

    </div> 

    <script src="@Url.Content("~/application/source/config.js")" type="text/javascript"></script> 

</body> 
</html> 

我相信這個問題是這行代碼在配置

window.define = System.amdDefine; 
window.require = window.requirejs = System.amdRequire; 

哪裏上面的代碼行,如果不走在配置?

回答

0

我已通過拆分配置和啓動來修復此問題。我以前在同一個文件中有配置和啓動。我的配置文件只有配置,我有一個單獨的啓動文件,實際啓動應用程序。

Index.cshtml

@using System.Web.Optimization; 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>My Application</title> 
    <meta name="description" content=""/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> 
    @Styles.Render("~/application/css/site.min.css") 
    <script src="@Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/localStoragePolyFill.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/system.js")" type="text/javascript"></script> 
</head> 
<body> 

    @Html.AntiForgeryToken() 
    <div id="applicationHost" class="page-wrap"> 

     <!-- The application is rendered here --> 

    </div> 

    <script src="@Url.Content("~/application/source/startup.js")" type="text/javascript"></script> 

</body> 
</html> 

Startup.js

// make sure we can load AMD files 
window.define = System.amdDefine; 
window.require = window.requirejs = System.amdRequire; 

// fire startup 
window.require(["application/source/config.js"], function() { 

    // start app once config is done loading 
    System.import("main"); 

}); 

config.js

System.config({ 

    baseURL: "application/source", 
    defaultJSExtensions: true, 
    packages:{ 
     pages: { 
       main: 'views/*.html', 
       format: 'amd', 
       defaultExtension: 'html' 
     } 
    }, 
    map: { 
     text: "../Scripts/text.js", 
     app: "app.js", 
     main: "main.js", 
     aes: "../../../Scripts/aes.js", 
     jquery: "../../../Scripts/kendo/2016.3.914/jquery.min.js", 
     kendo: "vendor/kendo/kendo.js", 
     DataTables: "../../../Scripts/DataTables/datatables.js", 
     k: "../../../Scripts/kendo/2016.3.914/", 
     bootstrap: "../../../Scripts/bootstrap.js", 
     lodash: "../../../Scripts/lodash.js", 
     moment: "../../../Scripts/moment.js", 
     ajaxSetup: "security/ajaxSetup.js", 
     q: "../../../Scripts/q.js", 
     toastr: "../../../Scripts/toastr.js", 
     wizards: "viewmodels/shared", 
     'kendo.core.min': "../../../Scripts/kendo/2016.3.914/kendo.core.min.js" 
    }, 
    paths: { 
     'kendo.*': "../../../Scripts/kendo/2016.3.914/kendo.*.js", 
     jquery: "../../../Scripts/kendo/2016.3.914/jquery.min.js", 
     bootstrap: "../../../Scripts/bootstrap.js" 
    }, 
    meta: { 
     app: { deps: ["kendo", "jquery"] }, 
     main: { deps: ["jquery"] }, 
     jquery: { exports: ["jQuery", "$"], format: "global" }, 
     kendo: { deps: ["jquery"] }, 
     bootstrap: { deps: ["jquery"] }, 
     'kendo.core.min': { deps: ["jquery"] }, 
     DataTables: { deps: ["jquery"], exports: "$.fn.DataTable" }, 
     toastr: { deps: ["jquery"] } 
    } 
}); 

我不知道這是正確的解決方案,但它確實解決了「窗口未定義」問題。