ES6-Module, Babel/Webpack. Import/Export-Anweisungen funktionieren nicht

Ok so lern ich reagieren, es6 und webpack/babel. Ich habe meine webpack.config unten ein:ES6-Module, Babel/Webpack. Import/Export-Anweisungen funktionieren nicht

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const merge = require('webpack-merge'); 
const validate = require('webpack-validator'); 
const parts = require('./config/webpack-parts'); 

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build') 
}; 

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: PATHS.app + '/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

const common = { 
    entry: { 
     app: PATHS.app 

    }, 

    output: { 
     path: PATHS.build, 
     filename: '[name].js' 

    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: "babel-loader" 
      } 
     ] 
    }, 

    plugins: [HTMLWebpackPluginConfig] 

}; 

var config; 

switch(process.env.npm_lifecycle_event) { 
    case 'build': 
     config = merge(
      common, 
      { 
       devtool: 'source-map', 
       output: { 
        path: PATHS.build, 
        filename: '[name].[chunkhash].js', 
        // This is used for require.ensure. The setup 
        // will work without but this is useful to set. 
        chunkFilename: '[chunkhash].js' 
       } 
      }, 
      parts.clean(PATHS.build), 
      parts.extractBundle({ 
       name: 'vendor', 
       entries: ['react'] 
      }), 

      parts.minify(), 
      parts.extractCSS(PATHS.app) 
     ); 
     break; 
    default: 
     config = merge(
      common, 
      parts.setupCSS(PATHS.app), 
      { 
       devtool: 'eval-source-map' 
      }, 
      parts.devServer({ 
       // Customize host/port here if needed 
       host: process.env.HOST, 
       port: process.env.PORT 
      }) 
     ); 
     break; 
} 

module.exports = validate(config);

Die ‚config/webpack-Teile‘ Datei ist nur einige zusätzliche Module/Plugins und nicht für die Frage benötigt. War nur darauf ausgerichtet, dies für alle Projekte wiederverwendbar zu machen. Ich habe babel auch einrichten und die .babelrc Datei unter

{ 
    "presets": [ 
    "es2015", 
    "react" 
    ] 
}

ich auch alle nesscary babel/webpack Plugins in meinem package.json Datei installiert bekommen haben:

"devDependencies": { 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "clean-webpack-plugin": "^0.1.10", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "html-webpack-plugin": "^2.22.0", 
    "style-loader": "^0.13.1", 
    "uglify-loader": "^1.3.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-merge": "^0.14.1", 
    "webpack-validator": "^2.2.7" 
    }, 
    "dependencies": { 
    "react": "^15.3.0", 
    "react-dom": "^15.3.0" 
    }

So, jetzt die Problem. Ich prüfe, dass das alles funktioniert und konvertiert es6 + react code in es5 mit babel etc .. Ich habe test 'hallo.js' und 'world.js' Dateien eingerichtet und ich importiere sie in meine Eingabe/Hauptdatei 'index .js. Hier ist der Fehler.

hello.js

import React, {Component} from 'react'; 

export class Hello extends Component { 

    render() { 
     return (
      <h1>Hello</h1> 
     ) 
    } 
}

world.js

import React, {Component} from 'react'; 

export class World extends Component { 
    render() { 
     return (
      <h1>World</h1> 
     ) 
    } 
}

index.js

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import Hello from 'hello'; 
import World from 'world'; 

ReactDOM.render(<Hello/>, document.getElementById('hello')); 
ReactDOM.render(<World/>, document.getElementById('world'));

Pre Web Pack index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Weather App</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head> 
<body> 
    <div id="hello"></div> 
    <div id="world"></div> 
</body> 
</html>

Ich erhalte den folgenden Fehler im Web Pack, wenn ich das Web Pack zum Ausführen der entsprechenden Aufgabe starte.

ERROR in ./app/index.js 
Module not found: Error: Cannot resolve module 'hello' in /Users/Foysal/Google Drive/Learning Projects/ReactJS-Tutorial/weather-app/app 
@ ./app/index.js 11:13-29

ich einen ähnlichen Fehler für die Datei ‚world.js‘ und ich habe keine Ahnung, was mit den Import/Export-Aussagen falsch ist. Ich bin nur neu bei es6-Modulen, aber ich habe so weit ich weiß bewusst exportiert und importiert. Ich würde mich über jede Hilfe freuen, danke.

Quelle

2016-08-04 Foysal94

Wo existieren diese Dateien in Bezug auf den Index? – aw04

Ich habe die richtige Antwort unten überprüft. Es hatte damit zu tun, wo die Dateien in Bezug zum Index standen. – Foysal94

sollten Sie relativen Pfad verwenden, wenn Sie Dateien erfordern, zum Beispiel:

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import Hello from '../components/hello'; 
import World from '../components/world';

In Ihrem Beispiel Knoten für hello und world Module in node_modules Verzeichnis.

Quelle

2016-08-04 20:00:11 1ven

wie können Sie das sagen? und ja, das war das Problem. Ich habe hallo.js, world.js, index.html und index.js alle im selben Ordner, warum sieht es also nicht standardmäßig im selben Verzeichnis aus? Ist es so, wie Module in es6 funktionieren? Danke – Foysal94

@ Foysal94, ja, standardmäßig, wenn nicht zu zeigen Pfad, Modul wird in 'node_modules 'Verzeichnis gesucht. Sie sollten Pfad immer angeben, wenn Sie Dateien benötigen. Wenn sich alle Dateien im selben Verzeichnis befinden, verwenden Sie 'import Hello from './Hallo''; – 1ven

ES6-Module, Babel/Webpack. Import/Export-Anweisungen funktionieren nicht

Antwort

Verwandte Themen