使用Webpack和Babel-loader进行ES6模块的导入和导出

Question

我正在使用webpack和babel-loader来转译我的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中没有得到任何错误，它创建了捆绑包，但当我运行它时，我会得到“找不到名为'Components.CustomerView'的组件”的错误提示。因此，除非是默认导出，否则“expose-loader”似乎无法创建“Components”全局变量，或者没有将“CustomerView”附加到其中... 有什么想法吗？

- user1641172

---

我责怪 Babel 的教程哈哈。 - user1641172

@AmanuelBogale 那是官方规范名称，不管你喜欢与否。http://www.ecma-international.org/ecma-262/6.0/ "ECMAScript® 2015 Language Specification" 两个名称都是有效的，未来年份版本将更为常见。 - loganfsmyth

无所谓 @loganfsmyth，我不喜欢那个名字。直接说ES6或ES7就好了... 我已经厌倦了。 - amanuel2

@NickDewitt 你有两个不同的“不起作用”的例子，在第一个例子中，它是给你语法错误还是像第二个例子一样默默失败了？ - loganfsmyth

啊不，看起来你必须使用括号 {}，除非有一个默认的导出声明。 - user1641172

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

这是有关IT技术的问题。结合两种编译方式后，出现了“找不到组件”的错误（这是React.net预渲染时的情况），除非我在CustomerView.jsx中设置默认的类导出，这意味着它会链接到这个导入/导出：

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

- user1641172