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。导入/导出语句不起作用

回答

相关问题