Question

我正在使用webpack和names bob bill john sally来转换我的ES6 / JSX，它被分成服务器和客户端捆绑包：

babel-loader

上述工作，但基于//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'] } }部分here中的示例，其中提及babel支持它，所以我假设我可以编写类似下面的内容，但它不起作用：

Syntax

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

export CustomerView from './CustomerView.jsx'

我没有从webpack得到任何错误，它创建了捆绑包但是当我运行它时我得到export class CustomerView extends React.Component { render() { ... } }，所以出于某种原因，除非它是默认导出，Could not find a component named 'Components.CustomerView'似乎没有创建expose-loader全局，或不附加Components ...任何想法？

Answer 1

我该做什么：

将导出值换行到{}：

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

我感到困惑的原因：

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

import CustomerView from './CustomerView.jsx'

当没有默认的类导出时，它需要包含在curlies中，或者它不起作用：

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

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

export CustomerView from './CustomerView.jsx'

或者

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

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

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

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

1 个答案: