ES6模块，babel / webpack。导入/导出语句不起作用

Question

好的，我正在学习React，ES6和Webpack / Babel。 我在下面设置了我的webpack.config：

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

“ config / webpack-parts”文件只是一些额外的模块/插件，而这个问题并不需要。 只是为了使它在项目中可重用。 我也设置了babel，并且.babelrc文件在下面

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

我还在我的package.json文件中安装了所有的nesscary babel / 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 + react代码转换为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>

当我运行Web Pack来执行其操作时，在Web Pack上出现以下错误。

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模块的新手，但据我所知，我已经正确导出和导入了。 我将不胜感激，谢谢。

Answer 1

需要文件时，应使用相对路径，例如：

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

在您的示例中，节点在node_modules目录中查找hello和world模块。

ES6模块，babel / webpack。导入/导出语句不起作用

问题描述

1 个解决方案

解决方案1
4 已采纳 2016-08-04 20:00:11

ES6模块，babel / webpack。 导入/导出语句不起作用

问题描述

1 个解决方案

解决方案1 4 已采纳 2016-08-04 20:00:11

ES6模块，babel / webpack。导入/导出语句不起作用

解决方案1
4 已采纳 2016-08-04 20:00:11