Question

我尝试按照this blog post使用 react jsx 和 es6 来设置项目，但是在解析jsx时webpack构建失败

./src/index.jsx中的错误模块构建失败：SyntaxError：意外令牌（5：7）

当我尝试不使用jsx时，项目构建成功，但生成的文件仍然包含es6元素，如 import ，所以看起来babel根本没有做任何事情。

我的项目包含以下文件：

的package.json

{
  "name": "playground",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.jsx",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "lodash": "^4.15.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "webpack": "^1.13.2"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname, 'target');
var APP_DIR = path.resolve(__dirname, 'src');

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

module.exports = config;

.babelrc

{
    "presets" : ["es2015", "react"]
}

的index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Playground</title>
    </head>
    <body>
        <div id="app"/>
        <script src="target/bundle.js" type="text/javascript"></script>
    </body>
</html>

的src / index.jsx

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

render(<div>Hello</div>, document.getElementById('app'));

使用es6 react和jsx配置Webpack

0 个答案: