r.js를 사용하여 'text'를 사용하여보기를로드하는 SPA 응용 프로그램을 패키지화합니다.

Question

grunt를 사용하여 단일 main-build.js 파일에 SPA 응용 프로그램 (requirejs, durandal 2, knockout) durandal이 내 견해를로드하는 데 사용하는 '텍스트'플러그인에 심각한 문제가 발생했습니다.

dev에서 나는 durandal 앱을 빌드하는 표준 방법에 따라 동적으로 뷰를로드하는 데 '텍스트'를 사용하고 있습니다. 차이점은 뷰를 위해 일부 서버 측 템플릿을 수행해야하므로 실제로 동적으로 생성된다는 것입니다.

그 점을 염두에두고 r.js를 사용하여 앱 모델을 패키징하고 모델 및 서비스를 grunt-durandal 플러그인을 통해 단일 파일로보고 싶지만 뷰 (.html) 필요에 따라 동적으로로드합니다.

내 무언가 설정에서 나는 inlineText: false 옵션을 사용하고 있습니다.이 옵션은 빌드에서 '텍스트! *'모듈을 표시하지 않습니다. 그러나 나는 내가 갖는 응용 프로그램을 실행할 때 :

text.load 내부에서 다음 줄에

Uncaught TypeError: undefined is not a function :

이

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

로드되는 모듈 이름이 올 것 같다 (자사의 '! 텍스트 *'하나) 그러나 그 이상으로 나는이 문제를 디버깅하는 방법을 모른다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

내 고된 configuraiton은 다음과 같습니다

/*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']); 
}; 

Answer 1

아몬드는 동적로드를 지원하지 않습니다. require.toUrl을 구현하지 않으며 비동기 적 로더 플러그인을 지원하지 않습니다. RequireJS와 Almond의 창시자 인 James Burke는 같은 문제 인 here에 대해 대답했습니다.

이 문제를 해결하려면 RequireJS를 Almond 대신 번들에 포함 할 수 있습니다. 예 : here을 참조하십시오. 은 예약 된 특수 종속성 이름이므로 require.js의 별명을 r.js 구성의 paths 섹션에 작성해야합니다. 그런 다음이 별칭을 Almond 대신 config의 name 필드에 지정하십시오. 다음과 같은 메시지가 표시됩니다.

Answer 2

이 질문에 대한 추가 컨텍스트를 추가하고 싶습니다. 나는 Durandal w/TypeScript를 사용하고 있으며 최적화를 위해 노력하고 있습니다. 텍스트 플러그인과 관련하여 몇 가지 예외가 발생했습니다. 그와

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

, 내가 가진 모든 것을 얻을 수 있었다 :

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

나는 상대 경로를 제거하고 단지가 다음을 수행 결국 최적화 된 빌드 작업.