टाइपस्क्रिप्ट, प्रतिक्रिया और वेबपैक

Question

के साथ सीएसएस मॉड्यूल आयात करने के लिए कैसे वेबपैक के साथ टाइपस्क्रिप्ट में सीएसएस मॉड्यूल आयात करने के लिए?

1. सीएसएस के लिए .d.ts फ़ाइलें जेनरेट करें (या ऑटो-जेनरेट करें)? और क्लासिक टाइपस्क्रिप्ट import कथन का उपयोग करें? ./styles.css.d.ts के साथ: का उपयोग कर require Webpack समारोह

   import * as styles from './styles.css' 
   

2. आयात?

   let styles = require("./styles.css"); 
   

लेकिन पिछले दृष्टिकोण के लिए मैं require फ़ंक्शन होना चाहिए।

सबसे अच्छा तरीका या सबसे अच्छा विकल्प और एक कि भी सीएसएस फ़ाइल परिभाषा और कक्षाओं के लिए IntelliSense संभाल कर सकते हैं क्या है?

Answer 1

let styles = require("./styles.css"); क्योंकि यह जो प्रतिक्रिया की हर सुविधा के साथ संगत है जावास्क्रिप्ट का es5 संस्करण है सबसे अच्छा approch है। import * as styles from './styles.css' जावास्क्रिप्ट का es6 संस्करण है।

Answer 2

या आयात करनी webpack समारोह

यह मैं सिर्फ तुम क्या इस्तेमाल किया करने के लिए और अभी भी वहाँ अपनी परियोजनाओं के कुछ ही में उस कोड है का उपयोग कर।

---

अब: मैं typestyle लिखा है: http://typestyle.github.io/#/ लेकिन आप इसे उपयोग करने के लिए नहीं है। const styles = require('./styles.css') के साथ बस चिपके रहें यदि यह आपको खुश करता है। FWIW आप भी typestyle साथ कच्चे सीएसएस का उपयोग कर सकते अगर आप चाहते हैं http://typestyle.github.io/#/raw

Answer 3

ए) आप कह रहे हैं के रूप में, वहाँ एक सरल (नहीं सबसे अच्छा) का उपयोग करने आवश्यकता विकल्प है:

const css = require('./component.css') 

• हम की जरूरत है require के लिए टाइपिंग के रूप में यह टाइपस्क्रिप्ट में मानक सुविधा नहीं है।

• सरल इस विशिष्ट के लिए टाइपिंग की आवश्यकता हो सकती है:

  declare function require(name: string): string; 
  

• Webpack तो टाइपप्रति और उपयोग मॉड्यूल संकलन होगा ठीक से - लेकिन निर्माण के लिए किसी भी आईडीई और वर्ग के नाम जांच के बिना।

बी) वहाँ मानक आयात उपयोग करने के लिए बेहतर समाधान है:

import * as css from './component.css' 

• पूर्ण वर्ग के नाम के लिए सक्षम बनाता IntelliSense
• की आवश्यकता है प्रत्येक सीएसएस फ़ाइल के लिए प्रकार परिभाषा, अन्यथा tsc संकलक असफल हो जाएगा

उचित IntelliSense के लिए, Webpack प्रत्येक सीएसएस फ़ाइल के लिए प्रकार परिभाषा उत्पन्न करने के लिए की जरूरत है:

1. webpack उपयोग typings-for-css-modules-loader

   webpackConfig.module.loaders: [ 
       { test: /\.css$/, loader: 'typings-for-css-modules?modules' } 
       { test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' } 
   ]; 
   

2. लोडर अपने codebase में सीएसएस फ़ाइलों से प्रत्येक के लिए *.css.d.ts फ़ाइलें उत्पन्न होगा

3. टाइपस्क्रिप्ट कंपाइलर समझ जाएगा कि सीएसएस आयात प्रकार स्ट्रिंग के गुण (वर्ग नाम) के साथ मॉड्यूल होगा।

उल्लेख typings-for-css-loadera bug और क्योंकि प्रकार पीढ़ी देरी दायर की है, यह मामला हमारे *.css.d.ts फ़ाइल अभी तक उत्पन्न नहीं कर रहा है में वैश्विक *.css प्रकार की घोषणा करने के लिए सबसे अच्छा है।

कि little bug परिदृश्य:

1. सीएसएस फ़ाइल बनाएँ component.css
2. घटक में यह शामिल import * as css from './component.css'
3. भागो webpack
4. टाइपप्रति संकलक कोड संकलन करने की कोशिश करेंगे (त्रुटि)
5. लोडर उत्पन्न होगा सीएसएस मॉड्यूल टाइपिंग फ़ाइल (component.css.d.ts), लेकिन यह नया टाइप खोजने के लिए टाइपस्क्रिप्ट कंपाइलर के लिए देर हो चुकी है ypings फ़ाइल
6. रन webpack फिर से बिल्ड त्रुटि को ठीक करेगा।

आसान फिक्स सीएसएस मॉड्यूल आयात करने के लिए वैश्विक परिभाषा (। उदाहरण के लिए फ़ाइल अपने स्रोत जड़ में typings.d.ts कहा जाता है) बनाने के लिए है:

declare module '*.css' { 
    interface IClassNames { 
    [className: string]: string 
    } 
    const classNames: IClassNames; 
    export = classNames; 
} 

अगर कोई सीएसएस उत्पन्न फ़ाइल है इस परिभाषा का उपयोग किया जाएगा (जैसे आपने नई सीएसएस फ़ाइल जोड़ दी है)। अन्यथा जेनरेट विशिष्ट (उसी फ़ोल्डर में होना चाहिए और स्रोत फ़ाइल + .d.ts एक्सटेंशन के रूप में नामित होना आवश्यक है), उदाहरण के लिए। component.css.d.ts परिभाषा और IntelliSense पूरी तरह से काम करेगा।

component.css.d.ts का उदाहरण:

export const wrapper: string; 
export const button: string; 
export const link: string; 

और तुम उत्पन्न सीएसएस typings आप आईडीई में सेटअप फिल्टर अपने स्रोतों में विस्तार .css.d.ts साथ सभी फाइलों को छिपाने के लिए कर सकते हैं देखने के लिए नहीं करना चाहते हैं।