0

コンパイルされたファイルを実行すると、次のエラーが表示され続けます。

キャッチされていないエラー: json がありません

これが私の現在のrequirejs gruntタスク構成です:

requirejs: {
    options: {
            baseUrl: "build/repos/staging/dev",
            mainConfigFile: "dev/main.js",

            generateSourceMaps: false,
            preserveLicenseComments: false,

            name: "almond",
            out: "./static/js/compiled.js",
            //excludeShallow: ['vendor'],
            findNestedDependencies: true,
            removeCombined: true,
            //wrap: true,
            optimize: "uglify2",
            uglify2: {
                output: {
                    beautify: true,
                },
                lint: true,
                mangle: false,
                compress: false,
                compress: {
                    sequences: false
                }
            }
        }
    }

そして、これが私の dev/main.js ファイルです:

// This is the runtime configuration file.
// It also complements the Gruntfile.js by supplementing shared properties.require.config({
waitSeconds: 180,
urlArgs: 'bust=' + (new Date()).getTime(),
paths: {

    "underscore": "../vendor/underscore/underscore",
    "backbone": "../vendor/backbone/backbone",
    "layoutmanager": "../vendor/layoutmanager/backbone.layoutmanager",
    "lodash": "../vendor/lodash/lodash",
    "ldsh": "../vendor/lodash-template-loader/loader",
    "text": "../vendor/requirejs-plugins/lib/text",
    "json": "../vendor/requirejs-plugins/json",
    "almond": "../vendor/almond/almond",

    // jquery
    "jquery": "../vendor/jquery/jquery",
    "jquery.transit": "../vendor/jquery.transit/jquery.transit",
    "jquery.mousewheel": "../vendor/jquery.mousewheel/jquery.mousewheel",
    "jquery.jscrollpane": "../vendor/jquery.jscrollpane/jquery.jscrollpane"
},

shim: {
    'backbone': {
        deps: ['underscore']
    },
    'layoutmanager': {
        deps: ['backbone', 'lodash', 'ldsh']
    },
    'jquery.transit': {
        deps: ['jquery']
    },
    'json': {
        deps: ['text']
    }
}});
// App initialization
require(["app"], function(instance) {
    "use strict";
    window.app = instance;
    app.load();
});

そして最後に、私の dev/app.js ファイル:

define(function(require, exports, module) {

"use strict";

// External global dependencies.
var _ = require("underscore"),
    $ = require("jquery"),
    Transit = require('jquery.transit'),
    Backbone = require("backbone"),
    Layout = require("layoutmanager");

module.exports = {

    'layout': null,

    'load': function() {

        var paths = [

                // ***
                // *** 1- define its path
                // ***

                'json!config/main.json',
                'modules/nav',
                'modules/store',
                'modules/utils',
                'modules/preloader',
                'modules/popup',
                'modules/login',
                'modules/user',
                'modules/footer',
            ];

        try {
            require(paths, function(

                    // ***
                    // *** 2- call it a name
                    // ***

                    Config,
                    Nav,
                    Store,
                    Utils,
                    Preloader,
                    Popup,
                    Login,
                    User,
                    Footer
                ) {

                    // ***
                    // *** 3- instance it in the app
                    // ***

                    app.Config = Config;
                    app.Nav = Nav;
                    app.Store = Store;
                    app.Utils = Utils;
                    app.Preloader = Preloader;
                    app.Popup = Popup;
                    app.Login = Login;
                    app.User = User;
                    app.Footer = Footer;

                    // require and instance the router
                    require(['router'], function(Router) {

                        // app configuration
                        app.configure();

                        // app initialization
                        app.Router = new Router();
                    });
            });
        } catch (e) {
            console.error(e);
        }
    },


    'configure': function() {

        var that = this;

        // set environment
        this.Config.env = 'local';

        // Ajax global settings
        Backbone.$.ajaxSetup({
            'url': that.Config.envs[that.Config.env].core,
            'timeout': 90000,
            'beforeSend': function() {
            },
            'complete': function(xhr, textstatus) {
            }
        });

        // Template & layout
        _.templateSettings = {
            interpolate: /\{\{(.+?)\}\}/g
        };

        Layout.configure({
            // Allow LayoutManager to augment Backbone.View.prototype.
            manage: true,
            // Indicate where templates are stored.
            prefix: "app/templates/",
            // This custom fetch method will load pre-compiled templates or fetch them
            // remotely with AJAX.
            fetch: function(path) {
                // Concatenate the file extension.
                path = path + ".html";
                // If cached, use the compiled template.
                if (window.JST && window.JST[path]) {
                    return window.JST[path];
                }
                // Put fetch into `async-mode`.
                var done = this.async();
                // Seek out the template asynchronously.
                $.get('/' + path, function(contents) {
                    window.JST[path] = contents;
                    done(_.template(contents));
                }, "text");
            }
        });
    },

};
});

grunt requirejs を実行するときに、その json モジュールが「必須」ではない理由は何ですか?

前もって感謝します。

4

1 に答える 1

0

これがまだ問題であるかどうかはわかりませんが、requirejs オプティマイザーのドキュメント ( http://requirejs.org/docs/optimization.html ) から:

オプティマイザは、最上位の require および define 呼び出し、または単純化された CommonJS ラッピングでの require('name') 文字列リテラル呼び出しに渡される文字列リテラルの配列で指定されたモジュールのみを結合します。したがって、変数名を介してロードされたモジュールは見つかりません...

requirejs オプティマイザーは、依存関係の配列である変数を使用して行われる require 呼び出しを好まないようです。

また、requirejs オプティマイザーは、最適化される実際のファイル内で使用されるrequire([ dependency array ], callback ) の構文が気に入らないようです。

この仕様に準拠するには、dev/app.js内の依存関係の宣言をリファクタリングする必要がある場合があります。たとえば、次の手順 1 と 2 のリファクタリングを使用できる場合があります。

var Config = require('json!config/main.json');
var Nav = require('modules/nav');
var Store = require('modules/store');
var Utils = require('modules/utils');
var Preloader = require('modules/preloader');
var Popup = require('modules/popup');
var Login = require('modules/login');
var User = require('modules/user');
var Footer = require('modules/footer');

これが機能する場合は、Router の依存関係の宣言についても同様のことを行う必要があるようです。

また、requirejs を実行した後に構成に含めることができるマイナーな追加機能は次のとおりです。

stubModules : ['json']

ビルドされたファイルには JSON オブジェクトが含まれている必要があるため、ビルドされたファイル内にプラグインは必要ありません。そのため、json プラグインを削除することでファイル サイズを小さくすることができます。

于 2015-11-27T21:05:01.137 に答える