Sử dụng r.js để đóng gói ứng dụng SPA có thể tải chế độ xem bằng cách sử dụng 'văn bản'

Question

Tôi đang cố gắng xây dựng một ứng dụng SPA (requirejs, durandal 2, knockout) thành một tệp main-build.js bằng cách sử dụng grunt và tôi đang chạy vào các vấn đề nghiêm trọng với plugin 'văn bản' mà sầu riêng đang sử dụng để tải lượt xem của tôi.

Trong dev, tôi đang sử dụng thành công 'văn bản' để tải chế độ xem theo cách động theo cách xây dựng ứng dụng sành điệu chuẩn. Sự khác biệt là tôi cần phải làm một số khuôn mẫu phía máy chủ cho các quan điểm và do đó, họ đang thực sự được tạo động. Với ý nghĩ đó, tôi muốn sử dụng r.js để đóng gói các mô hình ứng dụng, xem các mô hình và dịch vụ (thông qua plugin grunt-durandal) thành một tệp duy nhất, nhưng KHÔNG đóng gói các khung nhìn (.html). và vẫn tải chúng tự động khi cần.

Trong cấu hình grunt của tôi, tôi đang sử dụng tùy chọn inlineText: false - mà tôi đã chọn đang chặn mô-đun 'văn bản! *' Trong bản dựng. Nhưng khi tôi chạy các ứng dụng tôi nhận được:

Uncaught TypeError: undefined is not a function từ bên text.load vào dòng sau:

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

Tên mô-đun được nạp có vẻ là đúng (nó một '! Văn bản *' một) nhưng ngoài ra tôi không có ý tưởng làm thế nào để tiến hành gỡ lỗi vấn đề này. Tôi đang làm gì sai?

grunt configuraiton của tôi là:

/*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

Almond không hỗ trợ nạp năng động. Nó không triển khai require.toUrl và không hỗ trợ plugin trình tải không đồng bộ. James Burke, tác giả của RequireJS và Almond, đã trả lời về cùng một vấn đề here.

Để giải quyết vấn đề này, bạn có thể bao gồm RequireJS vào nhóm thay vì Hạnh nhân. Xem ví dụ here. Bạn phải tạo bí danh cho require.js trong phần paths của cấu hình r.js là require là tên phụ thuộc được bảo lưu đặc biệt. Sau đó, chỉ định bí danh này trong trường name của cấu hình thay vì Almond. Bạn sẽ nhận được nội dung như sau:

options: { 
    name: 'requireLib', // use the alias 
    baseUrl: requireConfig.baseUrl, 
    mainPath: 'App/main', 
    paths: mixIn(
     {}, 
     requireConfig.paths, 
     { 'requireLib': '../Scripts/require.js' }), // declare the alias 
    exclude: [], 
    inlineText: false, 
    optimize: 'none', 
    out: 'build/app/main-built.js' 
} 

Answer 2

Chỉ muốn thêm một số ngữ cảnh bổ sung cho câu hỏi này vì tôi tiếp tục quay lại hướng dẫn và cuối cùng đã giải quyết được sự cố của tôi. Tôi đang sử dụng Durandal w/TypeScript và grunt để tối ưu hóa. Tôi đã nhận được một số ngoại lệ xung quanh plugin văn bản, ví dụ:

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

tôi đã kết thúc loại bỏ các đường dẫn tương đối và chỉ cách làm như sau:

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

Với điều đó, tôi đã có thể để có được tất cả mọi thứ với tối ưu hóa xây dựng làm việc.