ES6 中的全局导入答案

【问题标题】：Global Import In ES6ES6 中的全局导入
【发布时间】：2018-06-21 18:53:07
【问题描述】：

我有一个大型第三方库，需要在两个项目之间共享。该项目有多个文件夹，其中包含多个导出的多个文件。而不是像这样导入这些模块

import {BaseContainer} from '@company/customproject/src/containers/BaseContainer.js'

我想这样做

import { BaseContainer } from '@company/customproject'

我知道我可以手动将所有模块导入到基目录中的单个 index.js 文件中，但我想知道是否有更简单的方法可以不显式地将它们全部导入

【问题讨论】：

标签： javascript es6-modules es6-module-loader

【解决方案1】：

我知道我可以手动将所有模块导入到基目录中的单个 index.js 文件中，但我想知道是否有更简单的方法可以不显式导入它们

您实际上应该只创建一个index.js 文件并将您要导出的任何内容导入其中，这样您就可以控制要导出哪些 API，而不是导出私有 API。

也就是说有一个automated tool 会自动为您生成一个index.js：

> npm install -g create-index
> create-index ./src

这将生成一个包含所有导出的index.js。

【讨论】：

【解决方案2】：

正如另一个答案所暗示的，您应该在每个目录中创建一个index.js 并明确导出内容

@company/customproject/index.js

import {BaseContainer, SomeOtherContainer} from './src/containers'

export {
  BaseContainer,
  SomeOtherContainer
}

@company/customproject/src/containers/index.js

import BaseContainer from './BaseContainer'
import SomeOtherContainer from './SomeOtherContainer'

export {
  BaseContainer,
  SomeOtherContainer
}

另一个自动加载整个目录的选项是使用require 和module.exports 来导出每个扫描的文件。使用 ES6 导入/导出以及 module.exports 和默认导出语句，您可能会遇到冲突。

@company/customproject/index.js

const fs = require('fs')
const modules = {}

fs.readdirSync(__dirname+'/src/containers').forEach(file => {
  file = file.replace('.js', '')
  modules[file] = require('./src/containers/'+file)
  // map default export statement
  if (modules[file].default) {
    modules[file] = modules[file].default
  }
})

module.exports = modules

然后在任何 ES5 或 ES6 模块中简单地使用它

const {BaseContainer} = require('@company/customproject')

或

import {BaseContainer} from '@company/customproject'

【讨论】：