Question

我开发了一个小包＃{3}}

在if (tempNode.getLeftChild() == null) { tempNode.setLeftChild(new Node(item)); return true; } else if (tempNode.getRightChild() == null) { tempNode.setRightChild(new Node(item)); return true; } else{ tempNode = tempNode.getLeftChild(); } }版本中，我有一个导出声明：

src

当我在此表单中使用此组件时，我可以像这样导入它：

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

但是，在我将包与webpack捆绑到import {Select} from 'select-react-redux';目录后，我得到一个输出文件，我希望它与原始文件具有相同的内容，但ES5而不是ES6。

捆绑文件包含： lib 这意味着我可以使用Select组件，但事实并非如此。

非常感谢任何帮助。

Answer 1

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

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

由于您在src/index.js中使用了ES6代码，因此您需要一个合适的加载程序来使用该软件包。但是通过你的webpack配置检查我发现你已经在lib/index.js中编译了代码。因此，您需要将包入口点指定为：

"main": "lib/index.js"

Answer 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'

希望这有帮助！

Answer 3

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

babel src/ -d lib/

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

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

在使用webpack传输ES6模块后，模块未导出

3 个答案: