创建hello world reactjs应用

我正在处理基本的Hello World React应用。我正在使用webpack/babel，但是在构建项目时出现错误，我还提供了我正在使用的依赖项的版本。创建hello world reactjs应用

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' 
    }) 
    ] 
}

错误：

ERROR in Error: Child compilation failed: Module build failed: ReferenceError: [BABEL] C:\workspaces\javascript\git hub-battle\node_modules\lodash\lodash.js: Unknown option: C:\workspaces\javascript\github-battle\package.json.presents. Check out http://babeljs.io/doc s/usage/options/ for more information about options. A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example: Invalid: { presets: [{option: value}] } Valid: { presets: [['presetName', {option: value}]] } For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options .

如果您需要了解更多有关我的Hello World项目的信息，请询问我是否愿意尝试解决此问题。

来源

2017-06-12 jtoepfer

该错误告诉你，你的Babel配置可能有问题。遵循了它的建议并验证了你的配置？ –

我可以知道你安装了babel预置es2015和stage-0 – Sweety

你应该检查官方的方式来初始化一个React应用程序create-react-app。它为您处理所有工具，因此可以让您快速轻松地引导应用程序。

来源

2017-06-12 16:08:14 Kerumen

我同意。这是最简单的方法，但我不喜欢在创建hello world应用程序时容易。我想了解更多有关封面内容的信息。 – jtoepfer

然后你可以运行'npm run eject'。它会复制你项目中的所有工具，你会知道底下会发生什么。这是非常有据可查的。 – Kerumen

CRA抽象出了开发者应该知道的东西。 – lux

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

"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"选项：

我在我的一个简单的阵营项目有这套通天devDependencies的接过来一看。

来源

2017-06-12 16:16:10

创建hello world reactjs应用

回答

相关问题