Question

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

我已将NPM和nodeJS更新为当前最新版本（3.8.9和6.1.0）

输出的错误是：

找不到Entry模块中的错误：错误：无法在C：\ xampp \ htdocs \ project \ tools
中解析模块'babel'

奇怪的是它正在查找正确的文件夹（node_modules文件夹在此目录中）但它根本找不到它。

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

应用
SRC
工具

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

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

工具文件夹包含我的gulpfile，node_modules，package.json，bower.json和bower_components

将jsx / 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)
                }
            }
        ]
    }
};

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

1 个答案: