Question

我做了很多次，但现在我觉得自己像个笨蛋。

它不起作用。

我不知道我做错了什么。我希望这是非常愚蠢的事情。

webpack.config.js ：

AttachmentCollection

的src / index.jsx ：

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

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: __dirname + '/js/',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx$/,
        exclude: /node_modules/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

运行webpack时出错：

import React from 'react'
import { render } from 'react-dom'
import ColorObj from 'components/ColorObject'

let rootElement = document.getElementById('color-game');

render(
  <ColorObj backgroundColor="green" textColor="black" />,
  rootElement
);

我不知道出了什么问题。我知道这是一个非常基本的错误，但我会感激任何帮助。

Answer 1

我不知道您的Babel设置目前是什么样的，但您需要这些预设才能正确解析React / ES2015语法。对于Babel＆gt; = 6.0.0：

npm install --save-dev babel-preset-es2015 babel-preset-react

在.babelrc：

中

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

Webpack，babel和react无法编译基本设置

1 个答案: