SystemJS Builder - окно не определено

Я пытаюсь создать свой проект как самоисполняемый пакет (SFX) с помощью Gulp и SystemJS-Builder. Когда я запускаю свою задачу gulp, я продолжаю получать сообщение об ошибке «окно не определено». Я исследовал проблему и не смог найти решение.

Вот мой файл сборки 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;

Куда идет приведенная выше строка кода, если не в конфигурации?


amd javascript systemjs js-amd
person TheMiddleMan    schedule 03.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я исправил проблему, разделив конфигурацию и запуск. Раньше у меня была конфигурация и запуск в одном файле. Мой файл конфигурации имеет только конфигурацию, у меня есть отдельный файл запуска, который фактически запускает приложение.

Индекс.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"] }
    }
});

Я не уверен, что это правильное решение, но оно решило проблему «окно не определено».

person TheMiddleMan    schedule 03.10.2016