عرض إصدار المكتبات المثبتة في مشروع React

يمكنك أن تقوم بذلك من خلال إستدعاء ملف ال package.json  طالما تستخدم react-scripts بإصدار 1.0.11 فما أحدث وذلك كالتالي 

import packages from '/package.json'

بعد ذلك لكي تستطيع الوصول إلى ماتريد فلاحظ أنها تنقسم إلى قسمين: 

1. dependencies

2. devDependencies

ولكي تستطيع أن تحصل على هذه البيانات كل ماعليك هو القيام بالتالي 

const dependencies = {...packages.dependencies, ...packages.devDependencies} 

وسوف تحصل في النهايه على object يحتوي على كل المكتبات التي تستخدمها بالإضافة الى الإصدار الخاصه بكل مكتبه وتقوم بعرضها كما تشاء.

ويمكنك إستخدام الكود التالي لعرضهم كما تريد بحيث يظهر عنصر ul بداخلة عنصر li لكل مكتبة مثبتة مع إصدارها أيضًا.

 const dependencies = {
    ...packages.dependencies,
    ...packages.devDependencies
  };
  const modifiedDependancies = [];
  for (const i in dependencies) {
    modifiedDependancies.push({ name: i, version: dependencies[i] });
  }

  return (
    <ul>
      {modifiedDependancies.map((item) => (
        <li key={item.name}>
          {item.name} : {item.version}
        </li>
      ))}
    </ul>
  );

ببساطة يمكنك عرض جميع المكتبات بإستخدام npm ls

في المكون الخاص بك أكتب مايلي.

const dependancies = [];
require('child_process').exec('npm ls --json', function(err, stdout, stderr) {
    if (err) return cb(err)
    dependancies.push(JSON.parse(stdout))
  });

عرض المصفوفة  dependencies

console.log(dependencies);

//   النتيجة
/*

[
 { name: 'aws-amplify', version: '^5.10.2' },
 { name: 'classnames', version: '^2.2.6' },
 { name: 'lodash', version: '^4.17.15' }
]

*/