كيفية استيراد وتصدير الوحدات على طريقة es5
 

تعرف كذلك بطريقة CommonJS، وفيها يتم استيراد الوحدات عن طريق الدالة ()require وتصديرها بواسطة التعبير module.exports.
هذا مثال بسيط على استيراد الوحدات في React.js على طريقة ES5.
//App.js const React = require('react'); const Product = require('./Product'); require('./App.css'); class App extends React.Component { render() { return ( <div className="App"> <div className="products"> <Product title="iPhone 8 Plus iPhone 7 Plus Screen Protector"/> <Product title="Samsung Galaxy J7 Pro (32GB) J730G/DS"/> <Product title="Apple 13'' MacBook Pro"/> </div> </div> ); } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//App.js
const React = require('react');
const Product = require('./Product');
require('./App.css');

class App extends React.Component {
render() {
return (
<div className="App">
<div className="products">
<Product title="iPhone 8 Plus iPhone 7 Plus Screen Protector"/>
<Product title="Samsung Galaxy J7 Pro (32GB) J730G/DS"/>
<Product title="Apple 13'' MacBook Pro"/>
</div>
</div>
);
}
}



نلاحظ بأننا قمنا باستيراد مكتبة react في أول سطر، وهي تكون موجودة عادة في مجلد /node_modules و Node.js يعرف جيدا أين وكيف يجد كل هذه التبعيات داخل هذا المجلد.
أما السطر الثاني ففيه نقوم باستيراد المكون Product الذي خصصنا له ملفا اسمه Product.js.
أما الإستيراد الثالث فهو لملف App.css، وهنا يجب معرفة أنه لا يمكن استيراد ملفات CSS باستخدام طريقة وحدات الجافاسكريبت، وإنما تمكننا من فعل ذلك هنا لأننا نقوم باستخدام Webpack (نسيت أن أخبركم في البداية أنني قمت بإنشاء المشروع بواسطة الأداة create-react-app التي بدورها تستعين ب Webpack ك Module Bundler). هذا الأخير من ضمن مميزاته الكثيرة، أنه يمكننا من استيراد ملفات CSS داخل أكواد جافاسكريبت.. هكذا ببساطة
أما ما تبقى فهو مجرد تعريف لمكون جديد في React سميته App وبداخله أقوم بإظهار ثلاث مكونات من نوع Product الذي قمنا سابقا باستيراده من الملف Product.js.
الملف Product.js بسيط :
const React = require('react'); const Product = (props) => ( <h2>{props.title}</h2> ) module.exports = Product;
1
2
3
4
5
6
7

const React = require('react');

const Product = (props) => (
<h2>{props.title}</h2>
)

module.exports = Product;



السطر الأول كما رأينا سابقا هو استيراد ل React، وأسفله الدالة أو المكون Product الذي يقوم بعرض عنوان المنتج داخل وسم <h2>.
https://www.tutomena.com/wp-content/...-es5-react.jpg
ما يهمنا بالدرجة الأولى في هذا الملف هو السطر الأخير. بدون module.exports لن نتمكن من من تصدير واستيراد هذه الوحدة من أي مكان وبالتالي تصبح بلا جدوى!
عندما نطلب من Node.js أن يستورد وحدة من ملف معين، فإنه يذهب ويقرأ ذلك الملف ويبحث عن التعبير module.exports للتأكد من توفر هذه الوحدة للإستيراد أم لا.
استيراد أكثر من وحدة

في المثال السابق قمنا باستيراد وحدة واحدة فقط من الملف Product.js، وهي المكون Product. ماذا لو كان علينا أن نجمع عدة وحدات في ملف واحد ونقوم بتصديرها كلها ؟ هذا ممكن بطبيعة الحال والطريقة سهلة :
module.exports = { Product: Product, Other: Other }
1
2
3
4

module.exports = {
Product: Product,
Other: Other
}



وتكون طريقة الإستدعاء كالتالي :
var {Product} = require('./Product'); var {Other} = require('./Product');
1
2

var {Product} = require('./Product');
var {Other} = require('./Product');



استخدام طريقة ES6 الحديثة

فكرة الوحدات بطريقة ES6 هي نفسها مقارنه مع طريقة ES5، ولكن هناك اختلاف بسيط في التركيب أو Syntax.
عوض استخدام require نستخدم الكلمة import، وعندما نريد تصدير وحدة واحدة فقط من ملف جافاسكريبت (نعتبرها افتراضية في هذه الحالة) فإننا نستعمل التعبير export default :
//Product.js import React from 'react'; const Product = (props) => ( <h2>{props.title}</h2> ) export default Product; ----------------------------------------- //App.js import React from 'react'; import Product from './Product'; import './App.css'; ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//Product.js
import React from 'react';

const Product = (props) => (

<h2>{props.title}</h2>

)

export default Product;

-----------------------------------------

//App.js
import React from 'react';
import Product from './Product';

import './App.css';

...



لسنا على مجبرين على استخدام default هنا، ولكن بدون استخدامها سيكون علينا استخدام المعقوفتين { } عند استدعاء الوحدة.
import {Product} from './Product';
1

import {Product} from './Product';



أما إذا أردنا أن نعرض عدة وحدات للتصدير، فنقوم بما يلي :
//Product.js import React from 'react'; export const Product = (props) => ( <h2>{props.title}</h2> ) export const Other = (props) => ( <h2>Just an other component!</h2> ) ----------------------------------------- //App.js import React from 'react'; import {Product, Other} from './Product'; import './App.css'; ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//Product.js
import React from 'react';

export const Product = (props) => (
<h2>{props.title}</h2>
)

export const Other = (props) => (
<h2>Just an other component!</h2>
)

-----------------------------------------

//App.js
import React from 'react';
import {Product, Other} from './Product';

import './App.css';

...



نقوم فقط بوضع كلمة export قبل الدالة أو الكلاس أو أي كائن نريد تصديره.
هذا تقريبا أهم ما يمكن قوله عن نظام تصدير واستيراد الملفات في بيئة جافاسكريبت. توجد بعض التفاصيل الذي تحتاج معرفتها عند مستوى معين من الممارسة، ولكن كبداية، هذه المقدمة تكفي لفهم الفكرة جيدا.
يمكنك استخدام الطريقة التي تفضلها، ولكن تذكر أنه لا يمكن خلطهما معا، مثلا لا يمكنك التصدير ب module.exports والإستيراد بواسطة import، لا علاقة بينهما .
الأمر الثاني الذي أريد ذكره، هو أن طريقة ES6 هي المستقبل، كونها جزء أصلي من الإصدار الجديد للجافاسكريبت وليس خاصة ب Node.js فقط، وبالتالي يستحسن استخدامها منذ الآن. يمكنك الإستعانة بمجمع الوحدات Webpack من أجل تجاوز مشكل الدعم المحدود من المتصفحات الكبيرة، إلى حين وصول الدعم والتوافقية الكاملين.