(শক্তিশালী ডেভেলপার টুল দিয়ে আপনার জাভাস্ক্রিপ্ট ওয়ার্কফ্লো আরও কার্যকর করুন)
জাভাস্ক্রিপ্ট প্রজেক্ট বড় হওয়ার সাথে সাথে, আমাদের এমন টুল দরকার যা সাহায্য করে:
এখানেই Babel, Webpack, এবং npm-এর ভূমিকা আসে।
Babel এমন একটি টুল যা আপনাকে আধুনিক জাভাস্ক্রিপ্ট (ES6+) লিখতে এবং এটিকে এমন কোডে রূপান্তর করতে দেয় যা পুরনো ব্রাউজারেও (যেমন IE11) কাজ করে।
let, const, modules ইত্যাদি রূপান্তর করে// ES6 কোড
const greet = (name) => `Hello ${name}`;
// Babel আউটপুট (ES5)
var greet = function(name) {
return 'Hello ' + name;
};npm install --save-dev @babel/core @babel/cli @babel/preset-envএকটি .babelrc কনফিগ ফাইল তৈরি করুন:
{
"presets": ["@babel/preset-env"]
}একটি ফাইল ট্রান্সপাইল করুন:
npx babel script.js --out-file script-compiled.jsWebpack একটি শক্তিশালী টুল, যা জাভাস্ক্রিপ্ট ফাইল (এবং অন্যান্য অ্যাসেট) একটি বা একাধিক অপ্টিমাইজড আউটপুট ফাইলে বান্ডল করে।
.js ফাইলকে একটিতে একত্রিত করেnpm install --save-dev webpack webpack-cliproject/
├── src/
│ └── index.js
├── dist/
│ └── bundle.js (output)
├── webpack.config.jsconst path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development'
};npx webpacknpm হলো Node.js-এর ডিফল্ট প্যাকেজ ম্যানেজার। এটি আপনাকে তৃতীয়-পক্ষের লাইব্রেরি বা টুল ইনস্টল, আপডেট এবং ম্যানেজ করতে দেয়।
npm init # একটি নতুন প্রজেক্ট শুরু করে
npm install package # একটি প্যাকেজ ইনস্টল করে
npm install -D package # ডেভ ডিপেন্ডেন্সি হিসেবে ইনস্টল করে
npm uninstall package # একটি প্যাকেজ সরিয়ে ফেলে
npm update # সব প্যাকেজ আপডেট করে{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"start": "node server.js"
}
}ম্যানুয়ালি কমান্ড চালানোর বদলে, সেগুলো scripts-এ যোগ করুন:
npm run build
npm startআধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক ও ফুল-স্ট্যাক পরিবেশে কাজ করার জন্য এই টুলগুলো আয়ত্ত করা অপরিহার্য।