Ошибка gulp-webpack: модуль ввода не найден: Ошибка: не удается разрешить модуль 'babel'

Question

Я продолжаю эту проблему при попытке использовать gulp-webpack для пересылки jsx/js на уровень браузера.

Я обновил как НПМ и nodeJS к текущей последней версии (3.8.9 и 6.1.0)

Ошибка выводит является:

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

Странная вещь является то, что он ищет в правильной папке (папка node_modules находится в этом каталоге), но она не находит ее вообще.

---

Моя структура папок разделена на 3 папки, а именно

• App
• ЦСИ
• инструменты

Папка приложение содержит код уровня браузера (JS/css)

Папка ЦСИ содержит высокоуровневые языки (СКС/JSX)

инструментов папки содержит мой gulpfile, node_modules, package.json, bower.json и bower_components

---

Моего глоток задача transpiling JSX/JS на уровне браузера

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

---

Мой package.json файл

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

Это заняло у меня всего 3 дня, но мы здесь, и это работает!

Я разделил конфигурационный файл webpack, который представлен ниже. Жизненно важная задача - решить проблему и разрешить загрузку перед отдыхом!

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

Try установка:

npm install babel-loader --save