Javascript 传输到ES5，包括根目录以外的文件

我有一个项目，其中包含多个应用程序和此结构中的一些常见组件：

ui
 - app1
 - app2
 - components

组件中的javascript文件是用ES6编写的。app1和app2都有此网页包配置：

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'),
    }
  },
}

巴别塔配置：

{
  "plugins": [
    "transform-async-to-generator",
    "glamor/babel"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
}

我的代码：

import React, { Component } from 'react'
import { Button } from 'CommonComponents'

export default class ButtonView extends Component {
  render () {
    return <Button>GO!</Button>
  }
}

import React，{Component}来自“React”
从“CommonComponents”导入{Button}
导出默认类按钮查看扩展组件{
渲染（）{
回去吧！
}
}

我希望我的组件和应用程序能够使用Babel构建并传输到ES5。应用程序可以工作，但外部组件不能工作，我会遇到如下错误：

Module build failed: SyntaxError: Unexpected token (6:34)

  4 | class Button extends Component {
  5 |   render () {
> 6 |     if (this.props.stroke) return <ButtonStroke {...this.props} />
    |                                   ^

模块生成失败：语法错误：意外令牌（6:34）
4 |类按钮扩展组件{
5 |渲染（）{
>6 |如果（本支柱行程）返回
|                                   ^

---

如何确保babel传输我的外部组件？

看起来babel的网页规则没有设置为匹配该目录以外的任何内容（\uu dirname）。因此，这些组件不使用babel，JSX transpiler也没有启动。我没有在任何地方明确设置。是否缺少webpack/babel参数？我将在问题中添加我的babel配置。不知道您的路径。resolve AFAIK是否应包括组件，可能与resolve.alias冲突？您还可以尝试设置：th我的问题是外部文件不是一个合适的模块。它们只是javascript文件。我在问题中添加了一些HTML。@Damon解决方案是让加载程序也传输外部文件。更多信息如下：