11

grunt を使用して SPA アプリケーション (requirejs、durandal 2、ノックアウト) を単一の main-build.js ファイルにビルドしようとしていますが、durandal が私の読み込みに使用している「テキスト」プラグインで深刻な問題が発生しています。ビュー。

開発では、デュランダルアプリを構築する標準的な方法に従って、「テキスト」を使用してビューを動的にロードすることに成功しています。違いは、ビューに対してサーバー側のテンプレートを作成する必要があるため、実際には動的に生成されることです。

それを念頭に置いて、r.jsを使用してアプリモデル、ビューモデル、およびサービスを（grunt-durandalプラグインを介して）単一のファイルにパッケージ化しますが、ビュー（.html）をパッケージ化せずにロードしたいと思います必要に応じて動的に。

私のうなり声構成では、inlineText: falseオプションを使用しています-ビルドで「text!*」モジュールを抑制していることを確認しました。しかし、アプリケーションを実行すると、次のようになります。

Uncaught TypeError: undefined is not a function次の行の内側からtext.load：

var parsed = text.parseName(name),
            nonStripName = parsed.moduleName +
                (parsed.ext ? '.' + parsed.ext : ''),
            url = req.toUrl(nonStripName), // EXCEPTION THROWN HERE

ロードされているモジュール名は正しいようです ('text!*' の名前です) が、それ以上、この問題をデバッグする方法がわかりません。私は何を間違っていますか？

私のうなり声の構成は次のとおりです。

/*global module, require */

module.exports = function (grunt) {
'use strict';

// library that allows config objects to be merged together
var mixIn = require('mout/object/mixIn');

var requireConfig = {
    baseUrl: 'App/',
    paths: {
        'jquery': '../Scripts/jquery-2.1.0',
        'knockout': '../Scripts/knockout-3.1.0',
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
    }
};

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
        options: {
            "-W099": true, // allowed mixed tabs and spaces
            "-W004": true, // needed to avoid errors where TS fakes inheritance
            ignores: [
                'App/main-built.js' // ingore the built/compacted file
            ]
        },
        all: [ // run jshint on these files
            'gruntfile.js',
            'App/**/*.js'
        ]
    },
    // TODO: could add jasmine here to do JS testing
    clean: {
        build: ['build/*']
    },
    copy: {
        scripts: {
            src: 'Scripts/**/**',
            dest: 'build/'
        }
    },
    durandal: {
        main: {
            src: [
                'App/**/*.*',
                '!App/main-built.js', // ignore the built file!
                'Scripts/durandal/**/*.js'
            ],
            options: {
                name: '../Scripts/almond-custom',
                baseUrl: requireConfig.baseUrl,
                mainPath: 'App/main',
                paths: mixIn(
                    {},
                    requireConfig.paths,
                    { 'almond': '../Scripts/almond-custom.js' }),
                exclude: [],
                inlineText: false, // prevent bundling of .html (since we are dynamically generating these for content)
                optimize: 'none', // turn off optimisations - uglify will run seperately by grunt to do this
                out: 'build/app/main-built.js'
            }
        }
    },
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n' +
                '* Copyright (c) <%= grunt.template.today("yyyy") %> Kieran Benton \n' +
                '*/\n'
        },
        build: {
            src: 'build/App/main.js',
            dest: 'build/App/main-built.js'
        }
    }
}
);

// loading plugin(s)
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-durandal');

// only one grunt task
grunt.registerTask('build', [
    'jshint',
    'clean',
    'copy',
    'durandal:main']);
};
4

2 に答える 2

0

ガイダンスのために何度も戻ってきて、最終的に問題を解決したので、この質問に追加のコンテキストを追加したいだけです。最適化のために TypeScript と grunt を使用して Durandal を使用しています。テキストプラグインの周りでいくつかの例外が発生していました。

<div data-bind="compose: { model: someObject, view: '../../components/something/something.html' }"></div>

最終的に相対パスを削除し、次のことを行いました。

<div data-bind="compose: { model: someObject, view: 'components/something/something.html' }"></div>

これで、最適化されたビルドが機能する状態ですべてを取得できました。

于 2015-01-18T22:17:22.317 に答える