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零部件」文件只是一些額外的模塊/插件和不需要的問題。只是旨在使這個項目可重用。我得到了巴貝爾設置還和.babelrc文件低於

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

我也有我的package.json文件中安裝的所有nesscary巴貝爾/插件的WebPack：

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

所以，現在的問題。我測試了這一切工作，並使用babel將es6 +反應代碼轉換爲es5。我設置了測試'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'));

預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>

當我運行網絡包執行它的操作時，出現以下網絡包錯誤。

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

在你的榜樣，節點node_modules目錄尋找hello和world模塊。

來源

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

你怎麼知道？並且是那是問題。我有hello.js，world.js，index.html和index.js在同一個文件夾內，所以爲什麼它默認不在同一個目錄中查找？這是模塊在es6中的工作方式嗎？謝謝 – Foysal94

@ Foysal94，是的，默認情況下，如果不指向路徑，模塊將在'node_modules'目錄中搜索。當你需要文件時，你總是應該提供路徑。如果所有的文件都在同一個目錄下，使用'from hello'。 – 1ven

ES6模塊，babel/webpack。導入/導出語句不起作用

回答

相關問題