SystemJS Builder - window 未定义

Question

我正在尝试使用 Gulp 和 SystemJS-Builder 将我的项目构建为自执行包 (SFX)。当我运行我的 gulp 任务时，我不断收到错误，"window is not defined." 我研究了这个问题，但找不到解决方案。

这是我的 gulp 构建文件

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;

上面这行代码如果不在配置中去哪里了？

Answer 1

我已经通过拆分配置和启动解决了这个问题。我以前在同一个文件中进行配置和启动。我的配置文件只有配置，我有一个单独的启动文件实际启动应用程序。

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"] }
    }
});

我不确定这是正确的解决方案，但确实解决了 "window not defined" 问题。

SystemJS Builder - window 未定义

SystemJS Builder - window not defined

javascript

amd

js-amd

systemjs