創建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應用

回答

相關問題