توقف عن استيراد حزم JavaScript كاملة

وظيفة لوداش

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

حجم المشروع قبل استيراد المكتبة

حجم المشروع بعد استخدام طرق استيراد مكتبة مختلفة

▍1. الاستيراد التقليدي

import _ from ‘lodash’;

const _ = require('lodash');

▍2. استيراد ES6

import { get } from 'lodash';

const { get } = require('lodash');

▍3. استيراد ملف get.js من لوداش

import get from 'lodash/get';

const get = require('lodash/get');

هل تدعم جميع الحزم نهج الاستيراد الانتقائي؟

كيف تفعل نفس الشيء أثناء العمل مع مكتبات أخرى؟

مثال للاستيراد الأمثل باستخدام حزمة antd

import { Menu} from 'antd';

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

مثال للاستيراد الأمثل باستخدام حزمة واجهة المستخدم المادية

import { Button } from '@material-ui/core';

import Button from '@material-ui/core/Button';

مثال للاستيراد الأمثل باستخدام حزمة اللحظة

ملخص