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'。这就是错误所在。

你好.js

import React, {Component} from 'react';

export class Hello extends Component {

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

世界.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'));

预网页包 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>

当我运行 webpack 来做它的事情时，我在 webpack 上收到以下错误。

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 模块。