Question

好的，所以学习反应，es6和webpack / babel。我的webpack.config设置如下：

template <int... Is>
struct sum;

template <>
struct sum<>
    : std::integral_constant<int, 0>
{};

template <int First, int... Rest>
struct sum<First, Rest...>
    : std::integral_constant<int,
        First + sum_impl<Rest...>::value>
{};

＆＃39; config / webpack-parts＆＃39; file只是一些额外的模块/插件而不是问题所需。只是为了让这个可以在项目中重复使用。我也设置了babel，并且.babelrc文件位于

之下

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

我还在package.json文件中安装了所有nesscary babel / webpack插件：

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

所以现在问题。我正在测试这一切都有效，并使用babel等将es6 +反应代码转换为es5。我已经设置了测试＆＃39; hello.js＆＃39;和＆＃39; world.js＆＃39;文件，我将它们导入我的条目/主文件＆＃39; index.js＆＃39;。这就是错误所在。

hello.js

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

world.js

import React, {Component} from 'react';

export class Hello extends Component {

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

index.js

import React, {Component} from 'react';

export class World extends Component {
    render() {
        return (
            <h1>World</h1>
        )
    }
}

Pre web pack index.html

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来执行其操作时，我在Web包上收到以下错误。

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

我为'world.js＆＃39;发现了类似的错误。文件，我不知道导入/导出语句有什么问题。我只是es6模块的新手，但据我所知，我已正确导出和导入。我将不胜感激任何帮助，谢谢。

Answer 1

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

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

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

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

1 个答案: