使用 webpack 转换 ES6 模块后，模块未导出答案

【问题标题】：After transpilation of an ES6 module with webpack, module not exported使用 webpack 转换 ES6 模块后，模块未导出
【发布时间】：2017-04-04 08:21:18
【问题描述】：

我开发了一个小包here

在src 版本中我有一个导出声明：

export class Select extends React.Component {
    render() {
        return (
         ...the component
        )
    }
}

当我以这种形式使用这个组件时，我可以像这样导入它：

import {Select} from 'select-react-redux';

但是，在我将包与 webpack 捆绑到 lib 目录后，我会得到一个输出文件，我希望它与原始文件具有相同的内容，但是 ES5 而不是 ES6。

捆绑的文件包含： var Select = exports.Select = function (_React$Component) {} 这意味着 Select 组件应该对我可用，但它不是。

任何帮助将不胜感激。

【问题讨论】：

"Select 没有从中导出。" --- 请显示它究竟被转译成什么。（因为它可以很好地导出它babeljs.io/repl/…）
文件的捆绑版本被捆绑和最小化，像这里：github.com/adamgajzlerowicz/ReactSelect/blob/master/lib/…
请仅提供未缩小的相关部分。
在捆绑的文件中我发现了这个： var Select = exports.Select = function (_React$Component) {} 这意味着它正在被导出......但是为什么我不能导入它？
相应更改您的问题。目前还不清楚你有什么问题。

标签： javascript reactjs webpack ecmascript-6

【解决方案1】：

在package.json，我看到你的package's entry point被定义为：

"main": "src/index.js",

由于您在src/index.js 中有 ES6 代码，因此您将需要一个适当的加载器来按原样使用该包。但是通过检查你的 webpack 配置，我发现你已经在 lib/index.js 中转换了代码。所以你需要将你的包入口点指定为：

"main": "lib/index.js"

【讨论】：

【解决方案2】：

您的导出语句应该是以下任何一种

export default class Select extends React.Component {
    render() {
        return (
         ...the component
        )
    }
}

//import 

import Select from 'select-react-redux'

或

class Select extends React.Component {
        render() {
            return (
             ...the component
            )
        }
    }

export {
   Select,
}

//import
import {Select} from 'select-react-redux'

希望这会有所帮助！

【讨论】：

【解决方案3】：

感谢您的回答。他们都是正确的，但他们没有为我解决问题。我花了两天时间试图解决这个问题，我确信这是一个 webpack 问题。使用相同的源文件但使用 babel 编译它们的模块被正确导出。

babel src/ -d lib/

我还使用了这样的导出选项，位于index.js 文件的lib 文件夹的根目录中。这样当我添加更多组件时它会更加模块化

import {Select} from './Select';
export {Select as Select};

【讨论】：