我正在使用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