吞咽-webpack错误:输入模块未找到:错误:无法解决模块'babel‘

Question

当我试图使用gulp将jsx / js转换到浏览器级别时，我一直遇到这个问题。

我已经将NPM和nodeJS更新为当前的最新版本(3.8.9和6.1.0)

它输出的错误是：

未找到输入模块中的错误:错误:无法解析C中的“babel”模块：\xampp\htdocs\project\tools

奇怪的是，它正在查找正确的文件夹( node_modules文件夹在这个目录中)，但是它根本找不到它。

我的文件夹结构分为三个文件夹，即

• 应用程序
• src
• 工具

应用程序文件夹包含浏览器级代码(js / css)

src文件夹包含更高级别的语言(scss / jsx)

tools文件夹包含我的gulpfile、node_modules、package.json、bower.json和bower_components

将js /js转换为浏览器级的gulp任务

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的配置文件，如下所示。至关重要的是在休息前要有决心和resolveLoader！

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