टाइपप्रति 2.0 और Webpack स्ट्रिंग

Question

मैं webpack की मदद से स्ट्रिंग के रूप में एक HTML फ़ाइल आयात करने के लिए कोशिश कर रहा हूँ जैसा कि HTML के आयात (वर्तमान में webpack का उपयोग कर, क्योंकि टाइपप्रति 2.0 async का समर्थन नहीं करता/गैर ES6 ठिकानों पर इंतजार है)।

समस्या मैं GitHub से एचटीएमएल-लोडर संस्करण एक config ध्वज का समर्थन करता है, भले ही है, है

'exportAsEs6Default' मैं इसे सही ढंग से स्थापित करने के लिए नहीं मिलता है। वैश्विक स्तर पर लोडर विकल्प सेट करने का कोई तरीका है? क्योंकि अगर मैं कॉन्फ़िगरेशन फ़ाइल में लोडर सेक्शन में एचटीएमएल लोडर जोड़ता हूं तो लोडर को दो बार बुलाया जाता है जिससे सामग्री घोंसला हो जाती है।

---

मैं (the modules documentation पर उदाहरण की तरह) HTML के आयात का समर्थन करने के लिए निम्नलिखित परिभाषा फ़ाइल है

declare module "html!*" { 
    const content: string; 
    export default content; 
} 

corresponsing इंपोर्ट स्टेटमेंट:

import templateString from "html!./Hello.html"; 

संकुल के संस्करण मैं का उपयोग करें:

"babel-core": "^6.17.0", 
"babel-loader": "^6.2.5", 
"babel-preset-es2015": "^6.16.0", 
"html-loader": "git://github.com/webpack/html-loader.git#4633a1c00c86b78d119b7862c71b17dbf68d49de", 
"ts-loader": "^0.9.5", 
"typescript": "2.0.3", 
"webpack": "^1.13.2" 

और webpack कॉन्फ़िग फ़ाइल

"use strict"; 

module.exports = { 
    entry: "./WebApp/Hello.ts", 
    output: { 
     path: "./wwwroot/compiled", 
     filename: "app.bundle.js" 
    }, 
    resolve: { 
     extensions: ["", ".webpack.js", ".web.js", ".js", ".ts"] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       exclude: /node_modules/, 
       loader: "babel-loader!ts-loader" 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: "babel-loader" 
      } 
     ] 
    } 
}; 

Answer 1

तो कुछ फेरबदल के बाद मैं इस किया जाना एक रास्ता मिल गया। चूंकि मैं प्रत्येक आयात कथन में 'exportAsEs6Default' क्वेरी पैरामीटर नहीं जोड़ना चाहता था, इसलिए मैं एक HTML के लिए एक कॉन्फ़िगर लोडर से एक कॉन्फ़िगर लोडर से बदल गया था।

अगर कोई बेहतर तरीके से जानता है तो मैं इस प्रश्न को खुला छोड़ दूंगा, क्योंकि वर्तमान में मुझे यकीन नहीं है कि मैं इस तरह से खुश हूं (टाइपस्क्रिप्ट के मूल निवासी को लोडर की आवश्यकता के बिना मिल जाएगा), लेकिन हो सकता है कि यह दूसरों को एक ही समस्या का सामना करने में मदद करेगा।

"use strict"; 

module.exports = { 
    entry: "./WebApp/Hello.ts", 
    output: { 
     path: "./wwwroot/compiled", 
     filename: "app.bundle.js" 
    }, 
    resolve: { 
     extensions: ["", ".webpack.js", ".web.js", ".js", ".ts", ".html"] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       exclude: /node_modules/, 
       loader: "babel-loader!ts-loader" 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: "babel-loader" 
      }, 
      { 
       test: /\.html$/, 
       exclude: /node_modules/, 
       loader: "html-loader?exportAsEs6Default" 
      } 
     ] 
    } 
}; 

:

---

इसलिए उदाहरण से इंपोर्ट स्टेटमेंट एक अद्यतन परिभाषा फ़ाइल

declare module "*.html" { 
    const content: string; 
    export default content; 
} 

और webpack कॉन्फ़िग फ़ाइल के साथ

import templateString from "./Hello.html"; 

एक साथ करने के लिए बदल के ऊपर इस के लिए बदल दिया

प्रयुक्त संकुल में कोई बदलाव नहीं।