ES6模块导入导出与webpack和babel-loader

Question

我使用的WebPack与babel-loader以transpile我ES6/JSX,它会分成服务器和客户端捆绑:

//components/CustomerView.jsx
export default class CustomerView extends React.Component {
    render() {
        ...
    }
}

//components/index.js
import CustomerView from './CustomerView.jsx'
export {CustomerView}

//client.js
var Components = require('expose?Components!./components');

//webpack.config.js (loader section)
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }

上面的工作,但基于这里的Syntax部分中的示例,其中提到babel支持它,所以我假设我可以编写类似下面的内容,但它不起作用:

export CustomerView from './CustomerView.jsx'

此外,如果类不是默认导出类,它也不起作用:

export class CustomerView extends React.Component {
    render() {
        ...
    }
}

我没有从webpack中得到任何错误,它创建了捆绑包但是当我运行它时我得到了Could not find a component named 'Components.CustomerView',所以出于某种原因,除非它是默认导出,否则看起来expose-loader要创建Components全局,或者不附加CustomerView到它...任何想法？

Answer 1

我应该做什么：

将导出值包含在{}：

export {CustomerView} from './CustomerView.jsx'

我感到困惑的原因：

CustomerView仅当该类是默认导出时才有效：

import CustomerView from './CustomerView.jsx'

当没有默认类导出时，需要用花括号包裹起来，否则不起作用：

import {CustomerView} from './CustomerView.jsx'

但由于某种原因，babel-loader当有默认类导出时不会编译它：

export CustomerView from './CustomerView.jsx'

或这个

import CustomerView from './CustomerView.jsx'
export CustomerView

编译了两个的组合，但给了我错误could not find a component（这是react.net预渲染），除非我在 中设置默认类导出CustomerView.jsx，我猜这意味着它链接到此导入/导出：

import CustomerView from './CustomerView.jsx'
export {CustomerView}