Babel 加载器无法识别 es2015 代码

Question

更新：

我上传了一个示例项目到github： https : //github.com/guocheng/debug-webpack

在这个示例项目中，我有两个相同的index.js文件。 一个在项目根目录下，另一个在/src 。

在npm install ，运行这个命令webpack-dev-server --config webpack.dev.config.js 。 你应该看到这个错误：

ERROR in ./index.js
Module parse failed: /Users/cheng/Dev/debug-webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, { Component } from 'react';
|
| export default class App extends Component {
 @ multi main

但是，如果您将webpack.dev.config.js 第 9 行更改为./src/index ，则相同的命令将起作用。

所以我放置index.js的位置会影响输出。

为什么会发生这种情况的任何想法？

---

这是我的.babelrc文件：

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-decorators-legacy", "transform-runtime"],
  "ignore": ["node-modues/**/*.js"]
}

我确实安装了babel-preset-2015, stage-0 and react 。

我使用以下 CLI 命令运行webpack-dev-server ： node ./webpack/server.js

这是server.js

const webpack = require('webpack'),
      WebpackDevServer = require('webpack-dev-server'),
      config = require('./dev.config')

new WebpackDevServer(webpack(config), {
    contentBase: './build',
    // webpack-dev-server options
    hot: true,
    historyApiFallback: true,
    inline: true,
    // webpack-dev-middleware options
    noInfo: false,
    quiet: false,
    lazy: false,
    publicPath: config.output.publicPath,
    headers: {'Access-Control-Allow-Origin': '*'},
    stats: { colors: true }
}).listen(port, ip, function(err, result) {
    if (err) {
        console.log(err)
    }
})

这是我使用的 webpack 配置文件：

const webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin')

const PATHS = {
    app: path.join(__dirname, 'app'),
    build: path.join(__dirname, 'build'),
    dist: path.join(__dirname, 'dist')
}

module.exports = {
    devtool: 'inline-source-map',
    entry: {
        javascript: [
            'webpack-dev-server/client?http://127.0.0.1:5555',
            'webpack/hot/only-dev-server',
            './app/index.js'
        ]
    },
    output: {
        path: PATHS.dist,
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['react-hot', 'babel?cacheDirectory'],
            exclude: /(node_modules|bower_components)/,
            include: path.join(__dirname, 'app'),
        },{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
        },{
            test: /\.(woff|woff2|eot|ttf)$/,
            loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
        },{
            test: /\.(png|jpg|svg)$/,
            loader: 'url-loader?limit=8192&name=img/[name].[ext]'
        }]

    },
    cssnext: {
        browsers: 'last 2 versions'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin(
            'bundle.css',
            {allChunks: true}),
        new webpack.DefinePlugin({
            '__DEVELOPMENT__': true,
            '__DEVTOOLS__': true
        })
    ]
}

当我运行开发服务器时，这是错误消息：

ERROR in ./app/index.js
Module parse failed: /Users/cheng/Dev/note/note-client/app/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react'
| import ReactDOM from 'react-dom'
| import { Provider } from 'react-redux'
 @ multi javascript

出于某种原因， presets没有启动。我尝试使用babel CLI手动测试文件：

babel index.js  // note: .babelrc is used for configuring the presets

我实际上可以看到正确的输出。 关于可能导致问题的任何建议？

我安装的软件包版本：

├── babel-core@6.7.2
├── babel-eslint@5.0.0
├── babel-loader@6.2.3
├── babel-plugin-transform-decorators-legacy@1.3.4
├── babel-plugin-transform-runtime@6.6.0
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0
├── babel-preset-stage-0@6.5.0
├── webpack-dev-server@1.14.1

---

这是我的项目折叠结构：

project_name
   |── app
        |── index.js
   |── dist
   |── build  
   |── webpack
          |── dev.config.js
          |── server.js
   |── .babelrc

我试图在项目根目录下运行以下命令，它给了我同样的错误：

webpack-dev-server --config ./webpack/dev.config.js

但是babel ./app/index.js可以工作。

Answer 1

由于您的配置位于webpack目录中， webpack您在 js 加载器中的包含路径无效：

    {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel?cacheDirectory'],
        exclude: /(node_modules|bower_components)/,
        include: path.join(__dirname, 'app'),
    }

在你的情况下包含路径是root/webpack/app并且必须是root/webpack/../app ：

path.join(__dirname, '..', 'app')