एक एसपीए एप्लिकेशन को पैकेज करने के लिए r.js का उपयोग करना जो 'टेक्स्ट'

Question

का उपयोग करके विचार लोड करता है। मैं एक एसपीए एप्लिकेशन (requjs, durandal 2, knockout) बनाने का प्रयास कर रहा हूं, जो कि एकमात्र मुख्य-build.js फ़ाइल में grunt का उपयोग कर फ़ाइल का उपयोग कर रहा है, और मैं 'टेक्स्ट' प्लगइन के साथ गंभीर मुद्दों में चल रहा हूं जो मेरे विचारों को लोड करने के लिए डुरंडल का उपयोग कर रहा है।

देव में, मैं सफलतापूर्वक 'टेक्स्ट' का उपयोग कर रहा हूं ताकि डुरंडल ऐप्स बनाने के मानक तरीके के अनुसार दृश्यों को गतिशील रूप से लोड किया जा सके। अंतर यह है कि मुझे विचारों के लिए कुछ सर्वर पक्ष templating करने की जरूरत है और इसलिए वे वास्तव में गतिशील रूप से उत्पन्न किया जा रहा है।

इस बात को ध्यान में रखते हुए मैं ऐप्स मॉडल को पैकेज करने के लिए r.js का उपयोग करना चाहता हूं, मॉडल और सेवाओं (ग्रंट-डुरंडल प्लगइन के माध्यम से) को एक फ़ाइल में देखना चाहता हूं, लेकिन विचारों को संकुचित नहीं करना (.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 लागू नहीं करता है और एसिंक्रोनस लोडर प्लगइन्स का समर्थन नहीं करता है। RequjS और बादाम के निर्माता जेम्स बर्क ने उसी मुद्दे के बारे में उत्तर दिया here।

इसके आसपास काम करने के लिए, आप बादाम के बजाय बंडल में RequJS को शामिल कर सकते हैं। उदाहरण here देखें। आपको require.js के लिए pathspaths में require के रूप में एक विशेष आरक्षित निर्भरता नाम के रूप में एक उपनाम बनाना होगा। फिर, बादाम के बजाय कॉन्फ़िगरेशन के name फ़ील्ड में इस उपनाम को निर्दिष्ट करें। आप कुछ इस तरह मिल जाएगा:

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

बस इस सवाल का कुछ अतिरिक्त संदर्भ जोड़ना चाहते हैं के बाद से मैं मार्गदर्शन के लिए इसे वापस करने के लिए आ रखा और अंत में मेरी समस्या हल। मैं Durandal डब्ल्यू/टाइपस्क्रिप्ट और अनुकूलन के लिए grunt का उपयोग कर रहा हूँ। मुझे टेक्स्ट प्लगइन के आसपास कुछ अपवाद मिल रहे थे, उदा।

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

इसी के साथ

, मैं के साथ सब कुछ प्राप्त करने में सक्षम था:

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

मैं सापेक्ष पथ को दूर करने और बस कर निम्नलिखित समाप्त हो गया अनुकूलित काम कर रहे हैं।