close

TypeScript लोकप्रिय विकास उपकरणहरूसँग एकीकरण गर्दै: Visual Studio Code, Webpack, र Babel

TypeScript मा विस्तार स्थापना गर्नुहोस् Visual Studio Code

TypeScript मा विस्तार स्थापना गर्नुहोस् Visual Studio Code

खोल्नुहोस् Visual Studio Code र विस्तार फलकमा नेभिगेट गर्नुहोस्।

" " खोज्नुहोस् TypeScript र आधिकारिक TypeScript विस्तार स्थापना गर्नुहोस्।

 

TypeScript tsconfig.json फाइलमा कम्पाइलर विकल्पहरू कन्फिगर गर्नुहोस्

TypeScript tsconfig.json फाइलमा कम्पाइलर विकल्पहरू कन्फिगर गर्नुहोस् ।

तपाईंको परियोजनाको आवश्यकता अनुसार कम्पाइलर विकल्पहरू अनुकूलित गर्नुहोस्।

उदाहरणका लागि:

{  
  "compilerOptions": {  
    "target": "es6",  
    "module": "commonjs",  
    "strict": true  
  }  
}

 

IntelliSense, स्वचालित प्रकार जाँच, र कोड नेभिगेसन जस्ता सुविधाहरू प्रयोग गर्नुहोस् Visual Studio Code

एकीकृत संग TypeScript, तपाईंले IntelliSense सुझावहरू, टाइप जानकारी, र त्रुटि पत्ता लगाउने क्रममा कोड लेख्दा लाभ उठाउनुहुनेछ Visual Studio Code ।

TypeScript को उन्नत भाषा सुविधाहरू, जस्तै कोड नेभिगेसन र रिफ्याक्टरिङ, सम्पादक भित्र पनि उपलब्ध छन्।

 

TypeScript संग एकीकरण गर्दै Webpack

आवश्यक प्याकेजहरू स्थापना गर्नुहोस्: typescript ts-loader र webpack

प्याकेजहरू स्थापना गर्न निम्न आदेश चलाउनुहोस्:

npm install typescript ts-loader webpack --save-dev

 

ts-loader प्रयोग गरी फाइलहरू ह्यान्डल गर्न कन्फिगर गर्नुहोस् webpack.config.js TypeScript

तपाईंको फाइलमा निम्न कन्फिगरेसन थप्नुहोस्: webpack.config.js 

module.exports = {  
  entry: './src/index.ts',  
  module: {  
    rules: [  
      {  
        test: /\.ts$/,  
        use: 'ts-loader',  
        exclude: /node_module/  
      }  
    ]  
  },  
  resolve: {  
    extensions: ['.ts', '.js']  
  },  
  output: {  
    filename: 'bundle.js',  
    path: path.resolve(__dirname, 'dist')  
  }  
};

 

TypeScript संकलन र बन्डलिङलाई अनुकूलन गर्नका लागि अतिरिक्त प्लगइनहरू र लोडरहरू सेटअप गर्नुहोस्

तपाइँले तपाइँको निर्माण प्रक्रियालाई थप बृद्धि गर्न terser- webpack -plugin, clean- webpack -plugin, वा -loader जस्ता अन्य प्लगइनहरू र लोडरहरू समावेश गर्न सक्नुहुन्छ। babel

 

TypeScript संग एकीकरण गर्दै Babel

आवश्यक प्याकेजहरू स्थापना गर्नुहोस्: typescript @ babel /preset- typescript, र @ babel /cli

प्याकेजहरू स्थापना गर्न निम्न आदेश चलाउनुहोस्:

npm install typescript @babel/preset-typescript @babel/cli --save-dev

 

कन्फिगर गर्नुहोस् वा प्रिसेट समावेश गर्न .babelrc babel.config.js TypeScript

एक सिर्जना गर्नुहोस्। babel rc फाइल वा तपाईंको .config.js फाइलमा निम्न कन्फिगरेसन थप्नुहोस् babel:

module.exports = {  
  presets: ['@babel/preset-typescript']  
};

 

Babel विशिष्ट TypeScript सुविधाहरू वा अनुकूलता आवश्यकताहरूको लागि कन्फिगरेसन अनुकूलित गर्नुहोस्

तपाईंले विशेष सुविधाहरू सक्षम गर्न वा लक्षित वातावरणसँग अनुकूलता सुनिश्चित गर्न थप Babel प्लगइनहरू वा प्रिसेटहरू समावेश गर्न सक्नुहुन्छ। TypeScript

 

सुझाव र उत्तम अभ्यासहरू

  • TypeScript तपाइँको छनोट विकास उपकरणहरूमा परिष्कृत उत्पादकता र विकासकर्ता अनुभवको लागि सान्दर्भिक विस्तारहरू र प्लगइनहरू स्थापना गर्नुहोस् ।
  • विकासको क्रममा छिटो निर्माण समयको लागि लिभरेजको TypeScript वृद्धिशील संकलन सुविधा( tsc --watch वा)। webpack --watch
  • तपाईको विशिष्ट विकास वातावरणसँग एकीकरणलाई राम्रो बनाउनको लागि उन्नत कन्फिगरेसन विकल्पहरू अन्वेषण गर्नुहोस्, जस्तै को लागि ESLint नियमहरू सेटअप गर्नुहोस् TypeScript ।

 

TypeScript यस विस्तृत गाइडलाई पछ्याएर, तपाइँ लोकप्रिय विकास उपकरणहरू जस्तै Visual Studio Code, Webpack, र मा सहज रूपमा एकीकृत गर्न सक्षम हुनुहुनेछ Babel । TypeScript यसले तपाइँको विकास कार्यप्रवाहलाई बृद्धि गर्दछ, उन्नत भाषा सुविधाहरू प्रदान गर्दछ, र तपाइँलाई तपाइँको परियोजनाहरूमा को लाभहरूको पूर्ण लाभ लिन अनुमति दिन्छ ।