مشكلة مع Google Translator API، تحويل Webpack إلى وضع الإنتاج، وعدم عمل الشيفرة في صفحات مختلفة

بالنسبة للسؤال الأول فيرجى توضيح السؤال أكثر من ذلك

ولتحويل Webpack إلى وضع الإنتاج (production mode) من خلال ملف package.json، يمكنك اتباع الخطوات التالية:

• قم بفتح ملف package.json في محرر النصوص الخاص بك.
• ابحث عن القسم المسمى "scripts" في ملف package.json. إذا لم يكن لديك قسم "scripts" ، فيمكنك إضافته. 
• قم بإضافة التعليمة --mode production

"scripts": {
  "start": "webpack --mode development",
  "build": "webpack --mode production"
},

هناك عدة أسباب محتملة لعدم عمل JavaScript code إلا على index.html في مشروع webpack

• إذا كنت تستخدم الإضافة html-webpack-plugin فعلى الأغلب أنك لم تقم بإضافة بقية الصفحات إلى هذه الإضافة 
• التأكد من عدم وجود أخطاء في الكونسول أثناء بناء المشروع تمنع تضمين بعض الملفات.
• مراجعة ملف الإعدادات webpack.config.js والتأكد من صحة ضبط entry و output و plugins.

بتاريخ 5 ساعة قال Omar Abdelfattah2:

- عند تغيير اللغه اريد استخدام direct google translator API لكنه لا يعمل مع WEBPACK

صحيح Google Translate API لا يعمل مع Webpack بشكل افتراضي، وذلك لأن API يتطلب استدعاءات HTTP خارجية، والتي لا يمكن تنفيذها من داخل Webpack.

هناك عدة طرق لاستخدام Google Translate API مع Webpack، وأحد الخيارات هو استخدام بديل API مجاني ومفتوح المصدر مثل Translateer.

حيث Translateer هو API ترجمة يعتمد على Puppeteer، وهو إطار عمل لاختبار الويب يسمح بالتحكم في متصفح الويب من خلال JavaScript.

ولاستخدام Translateer مع Webpack، يمكنك تثبيت المكونات الإضافية التالية:

npm install translateer-webpack-plugin puppeteer-core

ثم إضافة الكود التالي إلى ملف webpack.config.js:

const TranslateerPlugin = require('translateer-webpack-plugin');

module.exports = {
  plugins: [
    new TranslateerPlugin({
      // API key
      key: 'YOUR_API_KEY',

      // Language pair
      from: 'en',
      to: 'ar',
    }),
  ],
};

وذلك سينشئ محولًا يترجم النص من الإنجليزية إلى العربية، وباستطاعتك استخدامه لترجمة أي نص في مشروعك باستخدام التعبير التالي:

const translatedText = await Translateer.translate(text, 'ar');

خيار آخر هو استخدام بديل API غير مجاني مثل Google Cloud Translation API.

وGoogle Cloud Translation API هو API ترجمة مدفوع من Google، ويوفر API ترجمة أكثر دقة وسرعة من Translateer.

وتستخدم Google Cloud Translation API مع Webpack من خلال تثبيت التالي:

npm install @google-cloud/translate

ثم يمكنك إضافة الكود التالي إلى ملف webpack.config.js:

const { Translate } = require('@google-cloud/translate');

module.exports = {
  plugins: [
    new TranslatePlugin({
      // Project ID
      projectId: 'YOUR_PROJECT_ID',

      // Key file
      keyFile: './path/to/key.json',

      // Language pair
      from: 'en',
      to: 'ar',
    }),
  ],
};

ونفس الأمر سينشئ محولًا يترجم النص من الإنجليزية إلى العربية باستخدام Google Cloud Translation API، وتستطيع استخدامه لترجمة أي نص في مشروعك باستخدام التعبير التالي:

const translatedText = await Translate.translate(text, 'ar');