webpack babel und reagieren einfaches Beispiel schlägt fehl

Ich versuche Webpack mit React und Babel. Ich habe ein einfaches Beispiel:webpack babel und reagieren einfaches Beispiel schlägt fehl

components.jsx:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { render } from 'react-dom' 

class Hello extends React.Component { 
    render() { 
    return <h1>Hello</h1> 
    } 
} 
ReactDOM.render(<Hello/>, document.getElementById('test')); 
export default Hello;

index.js:

import Hello from "components.jsx";

index.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Webpack, React and Babel example</title> 
</head> 
<body> 
    <div> </div> 
    <div id="test"> </div> 
    <script src="bundle.js"> </script> 
</body> 
</html>

webpack.config.js:

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

module.exports = { 
    entry: './index.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
};

Ich habe auch alle notwendigen Module installiert: babel-loader, babel-core babel-preset-es2015 babel-voreingestellt-reagieren, reagieren, reagieren-dom.

Allerdings, wenn ich „webpack“ in diesem aktuellen Ordner eingegeben, bekam ich immer Fehlermeldung:

ERROR in ./index.js Module not found: Error: Cannot resolve module 'components.jsx' in

Es ist so ein einfaches Beispiel, und ich muss einen großen dummen Fehler machen. Aber ich kann es einfach nicht finden.

Dank

Derek

Quelle

2016-06-08 derek

folgende sein, wenn Sie zu importieren versuchen ein Modul mit Namen, es wird erwartet, unter node_modules gefunden zu werden. Das ist wahrscheinlich nicht dort, wo Sie es haben wollen, also sollten Sie es stattdessen über (einen relativen) Pfad importieren.

import Hello from "./components.jsx";

Wenn die index.js und components.jsx Dateien einen Ordner freigeben, wird die oben arbeiten. Wenn dies nicht der Fall ist, müssen Sie ./ ändern, um auf den richtigen Speicherort zu zeigen.

Quelle

2016-06-08 07:03:55 ivarni

Super! Klappt wunderbar. – derek

Wie ich verstanden, index.js und components.jsx sind im selben Ordner befinden, wenn es wahr ist, sollte Pfad der

import Hello from "./components.jsx";

Quelle

2016-06-08 07:03:47

webpack babel und reagieren einfaches Beispiel schlägt fehl

Antwort

Verwandte Themen