我在这个结构中有一个包含多个应用程序和一些常见反应组件的项目:
var path = require('path')
module.exports = {
entry: ['babel-polyfill', './src/index.js'],
module: {
rules: [{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, '../components'),
path.resolve(__dirname, 'src')
],
loader: 'babel-loader'
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
InputComponents: path.resolve(__dirname, '../components'),
}
},
}
组件中的javascript文件是用ES6编写的。 app1和app2都有这个webpack配置:
{
"plugins": [
"transform-async-to-generator",
"glamor/babel"
],
"presets": [
"es2015",
"react",
"stage-0"
]
}
Babel config:
import React, { Component } from 'react'
import { Button } from 'CommonComponents'
export default class ButtonView extends Component {
render () {
return <Button>GO!</Button>
}
}
我的代码:
Module build failed: SyntaxError: Unexpected token (6:34)
4 | class Button extends Component {
5 | render () {
> 6 | if (this.props.stroke) return <ButtonStroke {...this.props} />
| ^
我希望使用Babel构建我的组件和应用程序并将其转换为ES5。应用程序工作但不是外部组件,我得到的错误如下:
javaMaxHeapSize
如何确保babel转换出我的外部组件?