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