模块解析失败：es6 用 .JS 文件中的 JSX 反应组件

Question

在导入带有 .js 作为文件扩展名的 es6 react 组件时，Webpack Babel 加载器失败。如果将文件扩展名更改为 .jsx，则 babel 会正确编译。有什么线索吗？

var config = {
  entry : {
    "login" : PAGE_DIR + '/login/index.js',
    "app" : PAGE_DIR + '/app/index.js'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name]-bundle.js'
  },
  module : {
		rules : [
    	{
        test : /\.(js|jsx)$/,
        include : PAGE_DIR,
				exclude: [
				  path.resolve(__dirname, "node_modules"),
				],
        loaders : ['babel-loader']
      }
		]
  }
};

编辑：

正在更新下面的日志。

> webpack -d

Hash: 83d5fd2d0c1113e55b32
Version: webpack 2.2.1
Time: 2057ms
          Asset     Size  Chunks                    Chunk Names
  app-bundle.js  2.28 MB       0  [emitted]  [big]  app
login-bundle.js  1.98 MB       1  [emitted]  [big]  login
  [18] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} {1} [built]
  [19] ./~/react/lib/React.js 2.69 kB {0} {1} [built]
  [31] ./~/react/react.js 56 bytes {0} {1} [built]
  [80] ./~/react-dom/index.js 59 bytes {0} {1} [built]
 [109] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} {1} [built]
 [179] ./~/redux/es/index.js 1.08 kB {0} [built]
 [192] ./app/state/store.js 330 bytes {0} [built]
 [193] ./~/react-redux/es/index.js 194 bytes {0} [built]
 [196] ./app/state/reducer.js 766 bytes {0} [built]
 [209] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built]
 [215] ./~/react-redux/es/utils/Subscription.js 2.59 kB {0} [built]
 [216] ./~/react-redux/es/utils/shallowEqual.js 677 bytes {0} [built]
 [220] ./~/redux-logger/lib/index.js 4.45 kB {0} [built]
 [228] ./app/pages/app/index.jsx 694 bytes {0} [built]
 [229] ./app/pages/login/index.jsx 2.33 kB {1} [built]
    + 215 hidden modules

ERROR in ./app/components/login.jsx
Module parse failed: /Users/vsank1/Documents/workspace/registration/kudumbayogam/app/components/login.jsx Unexpected token (15:6)
You may need an appropriate loader to handle this file type.
|   render () {
|     return (
|       <form className="login">
|         <input type="email" name="emailid" placeholder="Email ID" onChange={this.changeEmailId.bind(this)} /><br/>
|         <input type="password" name="password" placeholder="Password" onChange={this.changePassword.bind(this)} /><br/>
 @ ./app/pages/login/index.jsx 11:13-50

ERROR in ./app/components/app.jsx
Module parse failed: /Users/vsank1/Documents/workspace/registration/kudumbayogam/app/components/app.jsx Unexpected token (30:3)
You may need an appropriate loader to handle this file type.
| 
|     return (
| 			<div className='row'>
| 				<div className='twelve columns'>
| 					<a href='#logout' className='logout button-link'>Logout</a>
 @ ./app/pages/app/index.jsx 15:11-46

Answer 1

您可能需要在 webpack 配置中安装配置预设，例如

module : {
        rules : [
           {
            test : /\.(js|jsx)$/,
            include : PAGE_DIR,
            exclude: [
                  path.resolve(__dirname, "node_modules"),
            ],
            loaders : ['babel-loader'],
            query: {
                 presets: ['react','es2015', 'stage-0']
             }
            }
        ]
  }

首先使用安装它们

npm install -S babel-preset-es2015 babel-preset-react babel-preset-stage-0

Answer 2

我终于明白了。添加包含文件夹时我犯了一个错误。我的组件位于 include 文件夹之外，并且所有这些组件都没有被加载器解析。我发现 webpack 只解析匹配 test 模式并且也在包含文件夹中的文件。

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'client/assets/js');
var APP_DIR = path.resolve(__dirname, 'app/');

var config = {
  entry : {
    "login" : APP_DIR + '/pages/login/index.js',
    "app" : APP_DIR + '/pages/app/index.js'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name]-bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;