Javascript 创建hello world应用程序

我正在使用一个基本的Hello World React应用程序。我正在使用webpack/babel，但是在构建项目时，我遇到了一个错误，我还提供了我正在使用的依赖项的版本

index.js

var React = require('react');
var ReactDom = require('react-dom');
require('./index.css');

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

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

webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: { loader: 'babel-loader', options: { presents: ['env', 'react'] } } },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Github Battle',
      template: './app/index.html'
    })
  ]
}

错误：

错误中的错误：子编译失败：模块生成失败： ReferenceError:[BABEL]C:\workspaces\javascript\git hub battle\node\u modules\lodash\lodash.js:未知选项： C:\workspace\javascript\github-battle\package.json.presents。检查 out s/usage/options/了解有关的更多信息 选项。此错误的一个常见原因是存在 没有相应预设名称的配置选项对象。 例子： 无效：

{presets:[{option:value}]}

有效：

{presets:[['presetName'，{option:value}]}

有关预设配置的更多详细信息，请参阅

`

---

如果您需要有关我的hello world项目的更多信息，请询问，我非常愿意尝试解决此问题。

您应该查看启动React应用程序的官方方式。它为您处理所有工具，因此允许您非常快速、轻松地引导应用程序。

从您的错误来看，它看起来像是一个巴贝尔配置问题

我看了一下我的一个简单的React项目，它有一组巴别塔devDependencies：

"devDependencies": {
    "babel-core": "^6.24.0",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-preset-latest": "^6.24.0",
    "babel-preset-react": "^6.23.0",
}

---

也许您需要设置

“babel preset latest”

选项。

错误告诉您babel配置可能有问题。是否遵循其建议并验证了您的配置？请问您是否安装了babel preset es2015和stage-0I？我同意。这是最简单的方法，但我不喜欢在创建hello world应用程序时简单。我想知道更多关于封面下发生的事情。然后您可以运行

npm run eject

。它将复制项目中的所有工具，您将知道引擎盖下发生了什么。CRA对开发人员应该知道的内容进行了太多的抽象。

"devDependencies": {
    "babel-core": "^6.24.0",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-preset-latest": "^6.24.0",
    "babel-preset-react": "^6.23.0",
}