ما هي NPM ، الغزل ، بابل ، و Webpack ؛ وكيفية استخدامها بشكل صحيح؟

بدأ معظمنا ممن بدأوا في إنشاء تطبيقات الويب التفاعلية ، من إنشاء مواقع ويب عادية باستخدام مكتبات مثل jQuery. ونحن نمضي قدمًا في بدء مغامرتنا ، نواجه أولاً هذه التقنيات الأربعة. يصبح إنشاء مشروع React تجربة مؤلمة.

في هذه المقالة ، سنحاول تخفيف هذه التجربة المؤلمة عن طريق شرح هذه التقنيات واحدة تلو الأخرى وكيف تعمل معًا.

NPM والغزل

هذه التقنيات اثنين من حل المشكلة نفسها بالضبط. لكي تكون أكثر واقعية ، تعد Yarn مجموعة من NPM التي تحل العديد من المشكلات التي تواجه NPM. فما هي هذه ل؟

NPM لتقف على Node Package Manager. هذا هو ما يصف اسمه. وهو مدير حزمة لبيئات مقرها العقدة. يتتبع كل الحزم وإصداراتها ويسمح للمطور بتحديث هذه التبعيات أو إزالتها بسهولة. يتم تخزين كل هذه التبعيات الخارجية داخل ملف يسمى pack.json. يمكن إنشاء الملف الأولي بسهولة باستخدام CLI npm init (بافتراض تثبيت NodeJS في النظام). عند تثبيت حزمة باستخدام NPM ، يتم تنزيل الحزم من سجل مخصص. هناك الكثير من ميزات NPM مثل النشر. إذا كنت ترغب في معرفة المزيد حول NPM ، تحقق من الروابط في الأسفل.

كل لغة نستخدمها لديها شكل من أشكال مدير الحزم ، إما رسمي أو طرف ثالث. PHP لديه ملحن ، Python لديه PyPi ، Java لديها Gradle إلخ.

الآن ، دعونا نتحدث باختصار عن الغزل. وهو مدير الحزم الذي يستخدم NPM التسجيل كخلفية لها. غزل اثنين من المزايا الرئيسية على NPM. أولاً ، يقوم Yarn بإنشاء ملف yarn.lock. يخزن هذا الملف الإصدارات الدقيقة من التبعيات إلى الرقم الأخير. عند التثبيت ، يقوم Yarn أولاً بفحص ملف القفل للإصدارات ، ثم يتحقق من ملف package.json. لدى NPM أمر shrinkwrap يقوم بذلك بالضبط. ومع ذلك ، يقوم Yarn بإنشاء وتحديث ملف القفل الخاص به تلقائيًا عند تثبيت / تحديث التبعيات. ثانيا ، الغزل سريع جدا. عند تثبيت التبعيات لمشروع ، يقوم NPM بتثبيت الحزم بالتسلسل. هذا يبطئ الأداء بشكل كبير. الغزل يحل هذه المشكلة عن طريق تثبيت هذه الحزم بالتوازي.

هذا هو الحال الآن ل NPM والغزل.

بابل

مثل أي لغة ، لدى Javascript أيضًا إصدارات باسم ECMAScript (اختصار لـ ES). حاليًا ، تدعم معظم المتصفحات ES5. اعتاد ES5 أن يكون جيدًا على الرغم من أنه كان مؤلمًا أن يقوم بتدوينه. تذكر ، هذا لا يقرأ من الداخل وظائف رد الاتصال؟ الإصدار الجديد من Javascript ، ES6 ، المعروف أيضًا باسم ES2015 (تم الانتهاء من مواصفات اللغة في يونيو 2015) يجعل Javascript رائعًا مرة أخرى. إذا كنت تريد معرفة المزيد عن ES6 ، تحقق من الروابط في نهاية هذه المقالة. جميع الميزات الرائعة لـ ES6 تأتي مع مشكلة كبيرة واحدة - غالبية المتصفحات لا تدعمها بشكل كامل. عندها يأتي بابل للعب. بابل هو مترجم JS يحول كود JS الجديد إلى رموز قديمة. إنها أداة مرنة للغاية فيما يتعلق بالنقل. يمكن للمرء بسهولة إضافة إعدادات مسبقة مثل es2015 ، es2016 ، es2017 ، بحيث يقوم بابل بجمعها إلى ES5.

هنا مثال - رمز مكتوب في ES6:

اختبار الصف
  احسب القوى () {
    return [1،2،3] .map (n => n ** 2) ؛
  }
}

سيقوم بابل بنقل هذا الرمز إلى ما يلي ، بالنظر إلى الإعدادات المسبقة es2015:

"استخدام صارم" ؛
var _createClass = function () {function defineProperties (target، props) {for (var i = 0؛ i 
function _classCallCheck (مثيل ، Constructor) {if (! (مثيل مثيل Constructor)) {رمي TypeError جديد ("لا يمكن استدعاء فئة كدالة") ؛ }}
فار اختبار = وظيفة () {
  اختبار الوظيفة () {
    _classCallCheck (هذا ، اختبار) ؛
  }
_createClass (اختبار ، [{
    المفتاح: "calculatePowers" ،
    القيمة: الدالة calculatePowers () {
      إرجاع [1 ، 2 ، 3]. map (دالة (n) {
        return Math.pow (n، 2)؛
      })؛
    }
  }])؛
اختبار العودة
} ()؛

هذا مثال على الكيفية التي يسمح بها بابل لنا بالحصول على شفرة نظيفة يمكن صيانتها باستخدام أحدث مواصفات JS دون الحاجة إلى القلق بشأن دعم المتصفح.

Webpack

الآن بعد أن عرفنا ماهية بابل و ES6 / 7 ، نود أن نستخدمها. نود أيضًا استخدام SASS لأنماطنا ، و PostCSS للإصلاح التلقائي. بالإضافة إلى ذلك ، نود تصغير وتصغير كل من CSS و Javascript. يحل Webpack كل هذه المشكلات باستخدام ملف تهيئة واحد (يُسمى webpack.config.js) وحزمة Web CL واحدة للأوامر.

Webpack هي أداة بناء معيارية تحتوي على مجموعتين من الوظائف - Loaders و Plugins. تقوم اللوادر المحملة بتحويل الكود المصدري للوحدة النمطية. على سبيل المثال ، يضيف style-loader CSS إلى DOM باستخدام علامات النمط. sass-loader يجمع ملفات SASS إلى CSS. بابل محمل ينقل رمز JS نظرا المسبقة. الإضافات هي جوهر Webpack. يمكنهم القيام بأشياء لا تستطيع اللوادر القيام بها. على سبيل المثال ، هناك مكون إضافي يسمى UglifyJS يعمل على تقليل إخراج الحزمة على الويب.

وضع كل منهم معا

الآن نحن نعرف المفاهيم الكامنة وراء هذه ، دعونا نبني تطبيق Hello World بسيطًا باستخدام Babel و SASS و Webpack و Yarn و React. سيقوم هذا التطبيق بعرض Hello World من داخل مكون React. لم أتحدث عن React ولكن يتم استخدام toolchain التالي كثيرًا في تطبيقات React ؛ لذلك ، اخترت إظهار هذا المثال باستخدام React.

أولاً ، دعنا نثبت الغزل على مستوى العالم. إذا كنت تستخدم نظام تشغيل Linux وتم تثبيت NodeJS ، فاكتب فيه

sudo npm تثبيت -g الغزل

إذا كنت تستخدم نظام التشغيل MacOS وقمت بتثبيت NodeJS و Homebrew ، فاكتب في

الشراب تثبيت الغزل

والآن بعد تثبيت Yarn ، دعنا نذهب إلى دليل العمل الخاص بنا. مرة واحدة ، نحن في دليل العمل لدينا (الألغام هي ~ / example-react-app) ، اكتب في الغزل الحرف الأول - نعم. إذا قمت بفحص الدليل ، فسترى الآن إنشاء ملف package.json.

الوقت لتثبيت جميع التبعيات. نحتاج إلى تحديد ما نحتاج إليه لمشروعنا - بناء جملة Webpack و Babel و Babel JSX و Babel ES2015 و SASS وجميع اللوادر اللازمة لحزم الويب:

yarn add --dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015 node-sass css-loader sass-loader style-loader

نحن بحاجة أيضا رد:

غزل إضافة رد فعل رد فعل دوم

قد تسأل لماذا أضفنا - علامة العلم لتبعيات webpack. بعد تثبيت كل من هذين الخيارين ، إذا قمت بفحص ملف package.json ، فسترى أن الأجهزة التي تم تثبيتها بعلامة --dev موجودة في مجموعة devDependencies بينما تكون الملفات بدونها في صفيف التبعيات. إذا قمت بتثبيت هذا المشروع في بيئة الإنتاج ، فلن يتم تثبيت مجموعة حزم الإعانات فقط.

بمجرد تثبيت التبعيات ، فلنقم بإنشاء تطبيق نموذج لدينا. سيكون هيكل التطبيق كما يلي:

SRC /
   /index.jsx
   /index.html
   / مكونات
       /HelloWorld.jsx
   / الأنماط
       /app.scss
       / مكونات
           /hello-world.scss

في src / components / HelloWorld.jsx ، أضف التعليمات البرمجية التالية:

import React، {Component} from 'react'؛
فئة التصدير HelloWorld يمتد المكون {
    يجعل() {
        إرجاع (
            
                

Hello World

                     )؛     }
}
الافتراضي التصدير HelloWorld.

في src / index.jsx ، سنقوم بتضمين مكون HelloWorld وتقديمه. سنقوم أيضًا بتضمين أسلوب ساس الخاص بنا:

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من 'react-dom' ؛
استيراد HelloWorld من './components/HelloWorld' ؛
استيراد "./styles/app.scss" ؛
ReactDOM.render (
    ،
   document.getElementById ( 'التطبيق')
)؛

في src / styles / app.scss ، سنقوم بتضمين المكونات / hello-world.scss:

import 'المكونات / hello-world' ؛

في src / styles / components / hello-world.scss ، قم بتغيير لون حاوية hello world إلى اللون الأحمر:

.مرحبا بالعالم {
    لون احمر؛
}

سيقوم src / index.html بتحميل ملف الحزمة:



<رئيس>
   
   <عنوان> مثال React App 


   
   

الآن وقد أضفنا كل بنية التطبيق ، نحتاج إلى إعداد Webpack. أولاً ، نقوم بإنشاء webpack.config.js في جذر دليل العمل. يحتاج Webpack إلى نقطة إدخال ودليل إخراج. نقطة الدخول لدينا هي ملف src / index.jsx. دعنا نضع دليل الإخراج على أنه اسم ملف الإخراج والإخراج bundle.js. نحتاج أيضًا إلى جعل الملفات التي تبدأ بـ .jsx لا تحتاج إلى تضمين الملحق عند استيراده.

في ملف تكوين حزمة الويب ، دعونا نضيف هذين الحقلين المهمين:

// هذه المكتبة تتيح لنا الجمع بين المسارات بسهولة
const مسار = تتطلب ('مسار') ؛
module.exports = {
   إدخال: path.resolve (__ dirname ، 'src' ، 'index.jsx') ،
   انتاج: {
      path: path.resolve (__ dirname، 'output')،
      اسم الملف: 'bundle.js'
   }،
   حل: {
      الامتدادات: ['.js' ، '.jsx']
   }
}؛

الآن ، نحن بحاجة إلى إعداد لوادرنا. بالنسبة للملفات التي تنتهي بالامتداد .jsx ، سوف نستخدم babel-loader مع es2015 ونقوم برد الفعل المسبق. بالنسبة للملفات التي تنتهي بالملحق .scss ، سوف نستخدم sass-loader و css-loader ووادر تحميل النمط. هكذا سيبدو webpack.config.js بمجرد إضافة هذه اللوادر:

// هذه المكتبة تتيح لنا الجمع بين المسارات بسهولة
const مسار = تتطلب ('مسار') ؛
module.exports = {
   إدخال: path.resolve (__ dirname ، 'src' ، 'index.jsx') ،
   انتاج: {
      path: path.resolve (__ dirname، 'output')،
      اسم الملف: 'bundle.js'
   }،
   حل: {
      الامتدادات: ['.js' ، '.jsx']
   }،
   وحدة: {
      قواعد: [
         {
             اختبار: / \. jsx/ ،
             استعمال: {
                لودر: 'بابل لودر' ،
                خيارات: {إعدادات مسبقة: ['رد فعل' ، 'es2015']}
             }
         }،
         {
            اختبار: / \ scss/ ،
            الاستخدام: ['style-loader' ، 'css-loader' ، 'sass-loader']
         }
      ]
   }
}؛

الآن نحن بحاجة إلى تشغيل webpack. أسهل طريقة للقيام بذلك هي إضافته إلى package.json. أضف التالي إلى جذر ملف JSON:

البرامج النصية: {
    "build": "webpack -p"
}

يمثل العلم -p الإنتاج ، مما يقلل ويؤدي إلى تلوين الرمز دون الحاجة إلى تضمين المكونات الإضافية في التكوين. بمجرد حفظ الملف ، افتح المحطة الطرفية واكتب بناء تشغيل الغزل. إذا قمت بفحص دليل المخرجات الآن ، فستشاهد ملف bundle.js الذي تم إنشاؤه من الداخل. لن أتحدث عن كيفية تحميل ملف الحزمة الذي تم إنشاؤه لأنه خارج نطاق هذه المقالة.

يتم الآن إعداد Webpack ويتم إنشاء ملف الحزمة. الوقت لجعل التنمية أسهل. نحتاج التحميل الساخن لتطوير أسرع. الحل الأسهل والأفضل هو استخدام Webpack Dev Server. أولاً نحتاج إلى تحديث تكوين webpack الخاص بنا. أضف التالي إلى جذر webpack config:

devServer: {
   contentBase: './src' ،
   publicPath: '/ output'
}

يطلب هذان السطران من خادم webpack dev قراءة المحتوى من دليل src لخدمة الأصول ضمن مسار / إخراج عنوان URL. الآن ، نحن بحاجة إلى الذهاب إلى المحطة الطرفية وتثبيت خادم الويب webpack

إضافة الغزل --dev webpack-dev-server

بمجرد تثبيت خادم dev webpack ، لنقم بإضافة برنامج نصي آخر إلى package.json لتشغيله. تحت البرامج النصية ، أضف ما يلي:

"dev": "webpack-dev-server --hot --inline"

- علامة العلم تقف للتحميل الساخن ، - علامة العلم تقف لعدم إظهار شريط أدوات خادم الويب. أنا أحب ذلك بهذه الطريقة ، لذلك أنا إعداده بهذه الطريقة.

الآن لنقم بتشغيله:

غزل تشغيل ديف

يعمل Webpack Dev Server في المنفذ 8080 افتراضيًا. افتح المتصفح الخاص بك واكتب http: // localhost: 8080 وستكون جاهزًا.

يوجد مثال المشروع الذي أنشأناه في عنوان URL التالي: https://github.com/appristas/example-react-project

استنتاج

كان الغرض من هذه المقالة هو توضيح سبب أهمية هذه الأدوات لبناء تطبيقات الويب التفاعلية بسرعة باستخدام React (أو أي إطار آخر لهذه المسألة) وكيف تعمل هذه الأدوات معًا لتوفير تطور سريع ونشر بنقرة واحدة.

من المهم بالنسبة لي أن أذكر أن Facebook أنشأ أداة رائعة لبدء تشغيل تطبيقات التفاعل دون الحاجة إلى تهيئة التكوين: create-react-app. تحت الغطاء ، تستخدم حزمة البدء أيضًا webpack و بابل.

الروابط

NPM: https://www.npmjs.com
الغزل: https://yarnpkg.com
بابل: https://babeljs.io
Webpack: https://webpack.js.org

التنقيحات

  • [10/03/2017] تمت إضافة التصميم والإضافات إلى تكوين حزمة الويب الرئيسية ، وهو أمر ضروري لاستيراد ملفات JS دون كتابة ملحقات.
  • [05/11/2017] تم إصلاح بعض الأخطاء النحوية. تغييرات طفيفة في الهيكل.