Uncaught ReferenceError: Exporte ist nicht definiert

Ich versuche, mit webpack zu babel Paket und meine web-app (Reagieren + ES6). Aber wenn ich das webpack-dev-server und schlagen Sie die Seite bekomme ich bundle.js:1 Uncaught ReferenceError: exports is not defined Was mache ich falsch?

Hier ist mein webpack-Konfiguration:

var webpack = require('webpack');

module.exports = {
    entry : [
        './lib/index.js'
    ],
    output : {
        path : __dirname + '/dist/',
        libraryTarget: 'commonjs',
        filename : 'bundle.js'
    },
    plugins : [
        new webpack.NoErrorsPlugin()
    ],
    devtool: 'eval',
    module : {
        loaders : [
            {
                test : /\.js$/,
                loaders : [
                    'react-hot',
                    'babel'
                ],
                exclude : /node_modules/
            },
            {
                test : /\.(jpe?g|png|gif|svg)$/i,
                loaders : [
                    'url?limit=8192',
                    'img'
                ]
            },
            {
                test : /\.scss$/,
                include : /styles/,
                loaders : [
                    'style',
                    'css',
                    'sass'
                ]
            }
        ]
    },
    resolve : {
        extensions : ['', '.js', '.json']
    },
    externals : ['request']
};

Hier ist mein Paket.json

{
...
"dependencies": {
  "babel-core": ": ^6.0.0",
  "lodash": ": ^4.6.0",
  "react-dom": ": ^0.14.0",
  "react-redux": ": ^4.0.0",
  "react": ": ^0.14.0",
  "redux-devtools": ": ^2.1.5",
  "redux-thunk": ": ^1.0.0",
  "redux": ": ^3.0.4",
  "request": ": ^2.69.0"
},
"devDependencies": {
  "babel-loader": ": ^6.1.0",
  "babel-preset-es2015": ": ^6.6.0",
  "babel-preset-react": ": ^6.5.0",
  "css-loader": ": ^0.23.0",
  "file-loader": ": ^0.8.4",
  "gulp": "^3.9.1",
  "gulp-babel": "^6.1.2",
  "img-loader": ": ^1.2.0",
  "node-sass": ": ^3.2.0",
  "react-hot-loader": ": ^1.3.0",
  "sass-loader": ": ^3.1.2",
  "style-loader": ": ^0.13.0",
  "webpack": ": ^1.12.9",
  "webpack-dev-server": ": ^1.14.1"
},
...
}

webpack-dev-server

var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    config = require('../webpack.config.js');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(8081, 'localhost', function (err, result) {
    if (err) {
      console.log(err);
    }

    console.log('Listening at localhost:8081');
});

.babelrc

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

gulpfile

var gulp = require('gulp'),
    babel = require('gulp-babel');

gulp.task('babel', function () {
    return gulp.src('src/**/*.js').pipe(babel({
        presets : ['es2015', 'react']
    })).pipe(gulp.dest('lib'));
});

gulp.task('default', ['babel']);

InformationsquelleAutor HerrPfister | 2016-03-29

  1. 1

    Gibt es keine webpack-dev-server auf Ihre Skripte oder Abhängigkeiten.
    wenn Sie die Bearbeitung Ihrer Dateien mit der Node, und es hängt von der build
    "start": "npm führen Sie build & npm-run-server" führen Sie die Befehle gleichzeitig, und etwas sagt mir, dass Ihre app serviert wird, bevor der Aufbau fertig stellen. tun Sie dies statt
    "start": "npm führen Sie build && npm-run-server"

    auch nicht sicher, ob hot: true sollte in der Ausgabe-Objekt auf webpack config.

    Danke für den Tipp bezüglich && würde, haben mich auf der ganzen Linie. Das server-Skript, das ausgeführt wird, ist ein webpack-dev-server habe es nur über ein script statt der config. Ich werde es hinzufügen. Allerdings bin ich noch immer das gleiche Problem. Ich habe aktualisiert mein Paket.json und webpack.config mit den änderungen, die ich gemacht habe
    geben Sie diese ein Schuss, ich glaube, Sie könnten fehlen .babelrc-Datei, fügen Sie diese in das Stammverzeichnis Ihres Projekts mit unterhalb des Inhalts. { "presets": ["es2015", "reagieren"], }
    Also ich habe die .babelrc, installiert die Vorlagen zu reagieren und es2015, und dann auch installiert gulp und gulp-babel. Ich fügte hinzu, die neuen Dateien und aktualisiert mein webpack, um dies zu reflektieren. Ich lief Schluck babel, die transpiles die Dateien und speichert Sie in /lib/ und dann lief webpack welche bundles die babeled Dateien und legt das bundle in dist. Ich habe auch meine aktualisierten html-Referenz /dist/bundle.js aber ich bekomme immer noch die Exporte Fehler. Irgendwelche Ideen? Danke für die Hilfe btw.
    Versuchen Sie, diese loader: 'babel?presets[]=reagieren,Voreinstellungen, []=es2015 " wenn das nicht funktionieren { test: /\.jsx?$/, ausschließen: /node_modules/, Lader: ['reagieren-hot', 'babel-loader'] } falls das nicht funktionieren, überprüfen Sie heraus dieses github-setup: github.com/tiagorg/gulp-es6-webpack-example/blob/master/...
    Vielen Dank für alle Hilfe, aber ich fand es heraus 🙂 Es hat vor allem mit der Tatsache zu tun, dass die Anfrage nicht gut spielen mit webpack. So habe ich es entfernt.

    InformationsquelleAutor Frederick Mfinanga

  2. 1

    Habe ich es herausgefunden, nach dem starten von Grund auf wieder. Ich entfernte alles, was den Umgang mit gulp und machte einfach alles durch Radlader. Darüber hinaus scheint es, dass request einfach nicht mag zu spielen, zusammen mit webpack so dass ich Sie entfernt, die Abhängigkeit alle zusammen. Ich habe auch eingestellt, meine Pfade. Es funktioniert jetzt!

    Hier ist mein webpack:

    var webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry : {
        'name' : './src/index.js'
    },
    output : {
        path : path.join(__dirname, 'dist'),
        publicPath : '/assets/',
        filename : '[name].bundle.js'
    },
    plugins : [
        new webpack.NoErrorsPlugin()
    ],
    devtool : 'source-map',
    module : {
        loaders : [
            {
                test : /\.js$/,
                loaders : [
                    'react-hot',
                    'babel'
                ],
                include : path.join(__dirname, 'src')
            },
            {
                test : /\.(jpe?g|png|gif|svg)$/i,
                loaders : [
                    'url?limit=8192',
                    'img'
                ]
            },
            {
                test : /\.scss$/,
                include : path.join(__dirname, 'styles'),
                loaders : [
                    'style',
                    'css',
                    'sass'
                ]
            }
        ]
    },
    resolve : {
        extensions : [
            '',
            '.js',
            '.json',
            '.sass'
        ]
    }
};

    hier ist mein server

    var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    config = require('../webpack.config.js');

new WebpackDevServer(webpack(config), {
    publicPath : config.output.publicPath,
    inline : true,
    hot : true,
    historyApiFallback : true
}).listen(8081, 'localhost', function (err, result) {
    if (err) {
        console.log(err);
    }

    console.log('Webpack-dev-server started successfully!');
    console.log('----------------------------------------');
    console.log('Listening at localhost: 8081\n');
});

    hier ist mein babelrc

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

    InformationsquelleAutor HerrPfister

Schreibe einen Kommentar