gulp-webpack错误：未找到输入模块：错误：无法解析模块'babel'

Question

我试图使用gulp-webpack将jsx/js转换为浏览器级别时不断收到此问题。

我已经从NPM和更新的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个文件夹即

• 应用
• SRC
• 工具

的app文件夹包含浏览器级别的代码（JS/css）

的src文件夹包含高级语言（SCSS/JSX）

的Tools文件夹包含我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

尝试安装：

npm install babel-loader --save