Question

我的index.js不断在第一个简单的HTML元素上获得解析异常。

我试图关注很多帖子，并尝试在不同的配置方式之间进行更改，但我一直收到此错误。我尝试使用babel作为装载机或babel-loader但仍然没用。我的节点模块具有所需的依赖项，因此似乎没有任何遗漏。我在这里做错了，任何人都可以指出。

错误

ERROR in ./app/index.js Module parse failed: /mnt/c/development_box/react_sandbox/app/index.js Unexpected token (8:3) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (8:3)
    at Parser.pp$4.raise (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21) @ multi main

这是我的文件和配置

的package.json

{
  "name": "react_sandbox",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "dependencies": {
    "webpack": "~1.14.0",
    "babel-core": "~6.21.0",
    "babel-loader": "~6.2.10",
    "babel-preset-es2015": "~6.18.0",
    "babel-preset-react": "~6.16.0",
    "react": "~15.4.1",
    "react-dom": "~15.4.1"
  },
  "devDependencies": {
    "webpack-dev-server": "~1.16.2"
  }
}

webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = 
{
    entry : APP_DIR + '/index.js',
    output : 
    {
        path : BUILD_DIR,
        filename : 'bundle.js',
        publicPath : '/'
    },
    devtool : 'source-map',
    devServer : 
    {
        inline : 'true',
        contentBase : BUILD_DIR,
        port : 3333
    },
    module :
    {
        loader : 
        [
        {
            test : /\.js?/,
            include : APP_DIR,
            loader : 'babel',
            query : 
            {
                presets : [ 'es2015', 'react' ] 
            }   

        }
        ]

    }
}

module.exports = config

index.js

import React from 'react'
import {render} from 'react-dom'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render(){
        return (
            <p>Hello World!</p>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

命令

npm run dev

运行与webpack开发服务器的反应，使用babel作为加载器

0 个答案: