gulp-webpack error: Eingabemodul nicht gefunden: Fehler: Modul 'babel' kann nicht aufgelöst werden

Question

Ich erhalte dieses Problem, wenn ich gulp-webpack benutze, um jsx/js auf Browserebene zu übertragen.

I aktualisiert haben beide NPM und NodeJS auf die aktuellen neuesten Versionen (3.8.9 und 6.1.0)

Der Fehler gibt er ist:

ERROR in Entry module not found: Error: Cannot resolve module 'babel' in C:\xampp\htdocs\project\tools

Das Seltsame ist, dass es sucht im richtigen Ordner (der Ordner node_modules befindet sich in diesem Verzeichnis), findet ihn aber überhaupt nicht.

---

Meine Ordnerstruktur wird nämlich in drei Ordner unterteilt

• App
• src
• Tools

Der App Ordner enthält die Browser-Ebene Code (js/css)

Der src Ordner enthält höheren Programmiersprachen (SCSS/jsx)

Die Tools Ordner meine gulpfile enthält, node_modules, package.json, bower.json und bower_components

---

Mein Schluck Aufgabe für transpiling jsx/js auf Browser-Ebene

gulp.task('react', function() { 
return gulp.src('../src/js/react/index.js') 
.pipe(webpack({ 
    entry: 
    { 
     app: './../src/js/react/index.js' 
    }, 
    output: { 
    path: __dirname + "../app/js/react", 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 

    module: { 
    loaders: [{ 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     cacheDirectory: true, 
     query: { 
     presets: [ 
      'babel-preset-es2015', 
      'babel-preset-react' 
     ].map(require.resolve) 
     } 
    }] 
    }, 

    resolveLoader: { 
     modulesDirectories: [ 
      '../../../tools/node_modules' 
     ] 
    }, 

    resolve: { 
    root: __dirname, 
    modulesDirectories: ['node_modules', 'bower_components'], 
    extensions: ["", ".jsx", ".js"] 
    } 
})) 
.pipe(gulp.dest('../app/js/react')); 
}); 

---

Meine package.json Datei

{ 
    "name": "setup-nvdv", 
    "version": "2.0.0", 
    "description": "All around coding setup", 
    "main": "index.php", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Neal van der Valk", 
    "license": "ISC", 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.8.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-1": "^6.5.0", 
    "babel-runtime": "^6.6.1", 
    "del": "^2.2.0", 
    "gulp": "^3.9.1", 
    "gulp-autoprefixer": "^3.1.0", 
    "gulp-babel": "^6.1.2", 
    "gulp-cached": "^1.1.0", 
    "gulp-concat": "^2.6.0", 
    "gulp-cssnano": "^2.1.2", 
    "gulp-imagemin": "^3.0.0", 
    "gulp-jshint": "^2.0.0", 
    "gulp-livereload": "^3.8.1", 
    "gulp-minify-css": "^1.2.4", 
    "gulp-notify": "^2.2.0", 
    "gulp-plumber": "^1.1.0", 
    "gulp-purifycss": "^0.2.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-sass": "^2.3.1", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-ttf2woff": "^1.1.0", 
    "gulp-uglify": "^1.5.3", 
    "gulp-watch": "^4.3.5", 
    "gulp-webpack": "^1.5.0", 
    "imagemin-mozjpeg": "^6.0.0", 
    "jquery": "^2.2.3", 
    "jshint": "^2.9.2", 
    "lodash": "^4.12.0", 
    "react": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-redux": "^4.4.5", 
    "redux": "^3.5.2", 
    "webpack": "^1.13.0" 
    }, 
    "dependencies": { 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0" 
    } 
} 

Answer 1

Das bin ich dauerte insgesamt 3 Tage, aber hier sind wir und das funktioniert!

Ich habe die Konfigurationsdatei von Webpack, die unten dargestellt ist, getrennt. Die Sache, die lebenswichtig ist, ist die Entschlossenheit und die Auflösung von Loader vor dem Rest!

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

module.exports = { 
    entry: [ 
     // "babel-polyfill", 
     [__dirname, '.', '..', 'src', 'js', 'react', 'index.js'].join(path.sep) 
    ], 

    resolve: { 
     modulesDirectories: ["../tools/node_modules", "../tools/node_modules/babel"] 
    }, 

    resolveLoader: { 
     root: path.resolve(__dirname, 'node_modules') 
    }, 

    output: { 
     path: [__dirname, '.', '..', 'app', 'js', 'react'].join(path.sep), 
     filename: 'bundle.js' 
    }, 

    module: { 
     loaders: [ 
      { 
       include: path.resolve(__dirname, '../src/js'), 
       exclude: /(node_modules)/, 
       test: /\.jsx?$/, 
       loader: 'babel', 
       query: { 
        presets: [ 
         'babel-preset-stage-1', 
         'babel-preset-es2015', 
         'babel-preset-react' 
        ].map(require.resolve) 
       } 
      } 
     ] 
    } 
}; 

Answer 2

Versuchen Installation:

npm install babel-loader --save