تجميع الملفات باستخدام Babel وWebpack

عند استخدام Babel في مشروعي، أواجه تحديًا في دمج كل الملفات المدرجة في ملف واحد باستخدامه. في ملفي “server.js”، لدي سطرًا يستورد الملف “schema.js” الموجود في مسار “data/schema” بصيغة ES2015. وعند محاولة تجميع “server.js” باستخدام Babel باستخدام الأمر “babel -o server_production.js –minified server.js”، يتم إنتاج ملف جديد دون وجود أخطاء ويتم استبدال التعليمة “import” بـ “require”. ولكن، عند محاولة تشغيل “server.js” المجمع باستخدام “node”، يظهر خطأ يشير إلى أن “data/schema.js” لم يتم تحويله إلى ES5 بل تم فقط طلبه. والخطأ الدقيق هو “Unexpected token ‘import'”، لأنني أستخدم استيرادات أخرى في “data/schema.js”. لذا، السؤال هو: كيف يمكنني تجميع ملفي وكل الملفات التي يستوردها إلى ملف واحد؟ حاولت استخدام “babel -o server_production.js –minified data/schema.js server.js”، لكن ذلك لم ينجح أيضًا.

الحل يكمن في استخدام أداة تسمى “babel-preset-env” مع “webpack”، وهي أداة تسمح بتجميع كل الملفات إلى ملف واحد. أولاً، يتعين عليك تثبيت “webpack” و “babel-loader” و “babel-preset-env” باستخدام npm. يمكنك القيام بذلك عبر الأوامر التالية:

sqlCopy code
npm install webpack babel-loader @babel/core @babel/preset-env --save-dev

بعد تثبيت الحزم اللازمة، قم بإنشاء ملف تكوين “webpack.config.js” في الدليل الجذري لمشروعك. يمكن أن يكون مثل هذا:

javascriptCopy code
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './server.js',
  output: {
    filename: 'server_production.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

هذا الملف يعرف تكوين webpack الذي يعلمه كيفية تجميع الملفات. ثم تحتاج إلى تعديل ملف “package.json” الخاص بك لتشير إلى الأمر الذي يستخدم webpack. افتح ملف “package.json” وقم بإضافة السطر التالي في قسم “scripts”:

jsonCopy code
"scripts": {
  "build": "webpack --config webpack.config.js"
}

بعد ذلك، قم بتشغيل الأمر “npm run build” في مجلد مشروعك، وستقوم webpack بتجميع كل الملفات في “server.js” والملفات التي يستوردها إلى ملف واحد يسمى “server_production.js” في مجلد “dist”. هذا الملف الجديد يمكن استخدامه بدون أي مشاكل في تشغيل ملف “server.js” مع Node.js.

بعد أن قمت بتثبيت الحزم وإعداد ملفات التكوين، يمكنك الآن تشغيل عملية البناء باستخدام أمر npm. بمجرد تشغيل الأمر “npm run build”، سيبدأ webpack في تحليل ملف “server.js” الخاص بك وجميع الملفات التي يستوردها، ومن ثم يقوم بتجميعها جميعًا في ملف واحد.

باستخدام هذا النهج، لن تكون بحاجة إلى التعامل مع تحويل الملفات يدويًا، بل يقوم webpack بذلك تلقائيًا باستخدام Babel. يتيح لك هذا النهج الاستفادة من ميزات ES6+ دون الحاجة إلى القلق بشأن دعم المتصفح أو إصدار Node.js.

يُعتبر استخدام webpack مع Babel واحدًا من النهج الشائعة والفعّالة في مجال تطوير JavaScript حيث يتيح للمطورين بناء تطبيقات قوية وفعّالة بسهولة ويسر. يمكنك أيضًا توسيع تكوين webpack لتضمين المزيد من الإعدادات والتكاملات حسب احتياجات مشروعك الخاصة.

بهذا الشكل، يمكنك الآن تجاوز التحدي الذي واجهته مع Babel وضم جميع الملفات في مشروعك إلى ملف واحد، مما يجعل عملية تطوير وصيانة التطبيقات الخاصة بك أكثر فعالية وسهولة.