ES2015 import语法疑问：为何无法正确导入包的部分模块？

你的问题核心在于包的导出方式和你使用的导入语法不匹配。从日志输出能看到，你导入的N是一个默认导出的对象，里面包含Newsitem和Newsitems两个属性，但包并没有把Newsitem作为单独的命名导出来提供，所以你用{ Newsitem }这种命名导入的方式自然会得到undefined。

下面给你两种可行的解决方法：

方法一：从默认导出对象中解构（无需修改包源码） #

既然默认导出的是包含目标模块的对象，你可以先导入这个默认对象，再从中解构出需要的模块：

import N from '../../newsitems/src/index'
const { Newsitem } = N;

class Home extends React.Component {
  render () {
    console.log('+++ Newsitem:', Newsitem) // 现在就有值了
    return (
      <div>
        <Row>
          <Col xs={12}>
            <h1>Home...</h1>
          </Col>
        </Row>
        <Newsitem /> {/* 可以直接使用 */}
        {/* 或者继续用 <N.Newsitem /> 也没问题 */}
      </div>)
  }
}

方法二：修改包的导出方式（推荐长期维护） #

如果你有权限修改包的源码，可以把Newsitem和Newsitems改成命名导出，同时保留默认导出以兼容旧代码。在包的index.js里做如下修改：

// 定义你的组件
const Newsitem = () => { /* ... */ };
const Newsitems = () => { /* ... */ };

// 命名导出
export { Newsitem, Newsitems };
// 保留默认导出，兼容之前导入N的代码
export default { Newsitem, Newsitems };

修改后，你原来的导入语法就能正常工作了：

import N, { Newsitem } from '../../newsitems/src/index'
// 此时Newsitem会正确获取到对应的组件，不再是undefined

内容的提问来源于stack exchange，提问作者Victor Pudeyev