ES6 модули, babel/webpack. Операции импорта/экспорта не работают

Хорошо, так что я изучаю реакцию, es6 и webpack/babel. Я получил мой webpack.config установить ниже:ES6 модули, babel/webpack. Операции импорта/экспорта не работают

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);

Файл «конфигурации/WebPack-PARTS» это только некоторые дополнительные модули/плагины и не нужно для этого вопроса. Был просто нацелен на то, чтобы сделать это многоразовым для проектов. Я получил столпотворение установить также и файл .babelrc ниже

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

Я также получил все nesscary Babel/WebPack плагинов, установленных внутри моего package.json файла:

"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" 
    }

Так что теперь проблема. Я тестирую, что все это работает и преобразует es6 + в код es5 с помощью babel и т. Д. Я установил файлы test hello.js и world.js, и я импортирую их в индекс моей записи/основного файла .js. Вот где ошибка.

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 веб-пакет 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>

Я получаю следующую ошибку в веб-пакете, когда я запускаю веб-пакет, чтобы выполнить его.

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

я получаю подобную ошибку для файла «world.js» и я понятия не имею, что это неправильно с импортом/экспортом отчетностью. Я только новичок в модулях es6, но, насколько мне известно, я экспортировал и импортировал правильно. Буду признателен за любую помощь, спасибо.

источник

2016-08-04 Foysal94

где эти файлы существуют относительно индекса? – aw04

Я проверил правильный ответ ниже. Это связано с тем, где файлы были связаны с индексом. – Foysal94

Вы должны использовать относительный путь, когда вы требуете файлов, например:

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

В вашем примере, узел ищет hello и world модулей в node_modules каталоге.

источник

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

Как вы можете это сказать? и это была проблема. У меня есть hello.js, world.js, index.html и index.js все внутри одной и той же папки, так почему же он по умолчанию не выглядит в том же каталоге? Это то, как модули работают в es6? Спасибо – Foysal94

@ Foysal94, да, по умолчанию, если не указать путь, модуль будет искать в директории 'node_modules'. Вы всегда должны указывать путь, когда вам требуются файлы. Если все файлы находятся в одном каталоге, используйте 'import Hello from './Hello''; – 1ven

ES6 модули, babel/webpack. Операции импорта/экспорта не работают

ответ

Смежные вопросы