时间戳

首页 > 解决方案 > 从不同文件导入的最佳方式

javascript - 从不同文件导入的最佳方式

问题描述

我有许多共享客户端和全局功能。现在我将它们导入一个文件并从那里导出，这样我就可以像这样在应用程序中导入它们：

一些component_1.js

import {
  Input,
  useRole,
  PopupContext,
  ProfileContext,
  PriceButton
} from 'shared'
import { regexp, dashUrl } from 'global'

一些component_100.js

import {
  theme,
  data,
} from 'shared'
import { regexp } from 'global

重新导出 shared.js （全局相同，但具有其他功能）：

// Компоненты
export { Button } from './components/Button'
export { Input } from './components/Input'
export { InputNumber } from './components/InputNumber'
export { SearchBox } from './components/SearchBox'
export { Select } from './components/Select'
export { Sex } from './components/Sex'
export { Textarea } from './components/Textarea'
export { Avatar } from './components/Avatar'
export { Cover } from './components/Cover'
export { Loading } from './components/Loading'
export { NeedProfile } from './components/NeedProfile'
export { SystemBlock } from './components/SystemBlock'
export { Modal } from './components/Modal'
export { DatePicker } from './components/DatePicker'
export { Tooltip } from './components/Tooltip'
export { PriceButton } from './components/PriceButton'
export { Highlight } from './components/Highlight'

// Иконки
export { AvatarIcon } from './icons/AvatarIcon'
export { PatreonIcon } from './icons/PatreonIcon'
export { CoverIcon } from './icons/CoverIcon'
export { CookiesIcon } from './icons/CookiesIcon'
export { EnergyIcon } from './icons/EnergyIcon'
export { FemaleIcon } from './icons/FemaleIcon'
export { ItIcon } from './icons/ItIcon'
export { ArrowIcon } from './icons/ArrowIcon'
export { KnigAmIcon } from './icons/KnigAmIcon'
export { MaleIcon } from './icons/MaleIcon'
export { MoonIcon } from './icons/MoonIcon'
export { EyeIcon } from './icons/EyeIcon'
export { PlusIcon } from './icons/PlusIcon'
export { PagesIcon } from './icons/PagesIcon'
export { BookIcon } from './icons/BookIcon'
export { SunIcon } from './icons/SunIcon'
export { VkIcon } from './icons/VkIcon'
export { CookieIcon } from './icons/CookieIcon'
export { LinkIcon } from './icons/LinkIcon'
export { StarIcon } from './icons/StarIcon'
export { SettingsIcon } from './icons/SettingsIcon'

// Use
export { marked } from './modules/marked'

//Функции
export { kFormatter } from './functions/kFormatter'
export { numEnds } from './functions/numEnds'
export { binaryClosest } from './functions/binaryClosest'

// Хуки
export { useRole } from './hooks/useRole'
export { useDebounce } from './hooks/useDebounce'

//Данные
export { defaultTheme } from './data/defaultTheme'

我很好奇，有没有更好的方法呢？

也许只是在组件中使用 * 是最好的方法？

import * from 'shared'
import * from 'global'

导入是参考，而不是副本，因此如果您至少使用一次模块，则捆绑大小不会增加（如果您导入 Button 一次或 100 次没有区别）。

标签： javascripttypescript

解决方案

我尝试遵循的一种模式是拥有一个index文件来管理给定文件夹中的导出。例如，给定一个文件夹结构：

src
 |---components
 |  |---InputNumber
 |  |---SearchBox
 |  |---Select
 |---data
 |  |---TestData
 |---utils
    |---MyHelper

我可能有这样的index.js文件components：

export * from './InputNumber';
export * from './SearchBox';
export * from './Select';

在src我可能有这样的index.js文件：

export * from './components';
export * from './data';
export * from './utils';

这打破了导出到目录/包本身的责任。components控制从自身导出的内容，依此类推。

推荐阅读