Question

我正在使用基本的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') );

的package.json

 {
   "name": "github-battle",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "create": "webpack"
   },
   "babel": {
     "presents": [
       "env",
       "react"
     ]
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
   "devDependencies": {
      "babel-core": "^6.25.0",
      "babel-loader": "^7.0.0",
      "babel-preset-env": "^1.5.2",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^0.28.4",
      "html-webpack-plugin": "^2.28.0",
      "style-loader": "^0.18.2",
      "webpack": "^2.6.1",
      "webpack-dev-server": "^2.4.5"
   }
}

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_modules \ lodash \ lodash.js：未知选项： C：\工作区\ JavaScript的\ github上，战\ package.json.presents。校验 out http://babeljs.io/doc s / usage / options /了解更多信息选项。这种错误的常见原因是存在a 配置选项对象没有相应的预设名称。例：无效：{ presets: [{option: value}] } 有效期：{ presets: [['presetName', {option: value}]] } 有关预设配置的更多详细信息，请参阅http://babeljs.io/docs/plugins/#pluginpresets-options。

`

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

Answer 1

您应该检查启动React应用的官方方式create-react-app。它可以为您处理所有工具，因此您可以非常快速，轻松地引导应用程序。

Answer 2

根据您的错误，它看起来像是Babel配置问题。

我看了一下我的一个简单的React项目，它拥有这组babel 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"选项。

创建hello world reactjs app

2 个答案: