ES6 中的全局导入

Question

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

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

我愿意这样做

import { BaseContainer } from '@company/customproject'

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

Answer 1

I know I can manually import all the modules into a single index.js file in the base directory but i am wondering if there is an easier way to do not have import them all explicitly

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

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

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

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

Answer 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 import/export 以及 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'

ES6 中的全局导入

Global Import In ES6

javascript

es6-module-loader

es6-modules