مرجع سريع

ورقة مساعدة لحزمة JavaScript بواسطة Browserify

مرجع أرشيفي لـ Browserify، مجمع CommonJS الكلاسيكي لـ JavaScript من جانب العميل: خيارات سطر الأوامر، التحويلات، والاستخدام البرمجي.

· تاريخ النشر

[!NOTE] Browserify هو مجمع وحدات JavaScript أرشيفي أدخل دالة require ونسق CommonJS الخاص بـ Node.js إلى المتصفح. تستخدم تطبيقات الويب الحديثة عادة Vite أو esbuild أو Rollup أو webpack.

استخدام سطر الأوامر (CLI)

# تجميع الحزمة الأساسية
browserify input.js -o output.js

# تطبيق التحويلات (Transforms)
browserify input.js -o bundle.js -t babelify

# إنشاء خرائط المصدر (Source Maps) لتصحيح الأخطاء
browserify input.js -o bundle.js --debug

# إنشاء حزمة UMD قائمة بذاتها
browserify input.js -s MyLibrary -o bundle.js

# استبعاد أو تجاهل أو تمييز الوحدات كوحدات خارجية
browserify input.js -u react     # --exclude
browserify input.js -x react     # --external
browserify input.js -i react     # --ignore

واجهة برمجة التطبيقات (Programmatic API)

const browserify = require('browserify');
const fs = require('fs');

const b = browserify('src/main.js', { debug: true });

b.transform('babelify', { presets: ['@babel/preset-env'] });

b.bundle().pipe(fs.createWriteStream('dist/bundle.js'));

تحويلات النظام البيئي الشائعة

  • babelify: يحول كود ES6+ وJSX الحديث إلى ES5 متوافق مع كافة المتصفحات.
  • envify: يستبدل process.env.NODE_ENV بنصوص ثابتة لإزالة الأكواد غير المستخدمة.
  • brfs: يدمج استدعاءات fs.readFileSync مع محتويات الملفات الثابتة في وقت البناء.
  • watchify: مراقب بناء تدريجي لإعادة البناء بسرعة فائقة أثناء التطوير.

موضوعات ذات صلة