gulp：模块解析失败答案

【问题标题】：gulp: Module parse failedgulp：模块解析失败
【发布时间】：2016-10-27 13:58:41
【问题描述】：

我正在使用 Laravel 5.3。

安装 node-uuid 后出现的错误。

{ [错误：./~/diffie-hellman/lib/primes.json 模块解析失败：/var/www/html/filecloudprod/node_modules/diffie-hellman/lib/primes.json 意外令牌 (2:11) 您可能需要适当的加载程序来处理此文件类型。

我的 package.json 文件。 注意 json-loader

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "dropzone": "^4.3.0",
    "animate.css": "^3.5.0",
    "node-uuid": "^1.4.7",
    "json-loader": "^0.5.4"
  }
}

然后尝试像这样在 gulpfile 中合并 webpack 配置。我尝试了 2 种不同的方法，请参阅 TRY1 和 TRY2，当然不是同时，只是发布了两种方法。

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

// TRY 1
elixir.webpack.mergeConfig({
    module: {
        loaders: [{
            test: /\.json$/,
            loader: 'json'
        }]
    }
});

// TRY 2 
elixir.ready(() => {
    elixir.config.js.webpack = {
        loaders: [{
            test: /\.json$/,
            loader: 'json'
        }]
    }
});

elixir(function (mix) {

    mix.sass('app.scss');

    mix.webpack('app.js');

    mix.browserSync({
        proxy: 'filecloud.dev'
    });    

    mix.version(['css/app.css', 'js/app.js']);
});

但我仍然得到错误。

完全错误

【问题讨论】：

标签： json npm gulp webpack laravel-elixir

【解决方案1】：

如果您想使用需要 json-loader 的 npm 模块，这就是解决方案。

将以下内容添加到 package.json 文件中。

“json-loader”：“^0.5.4”

使用以下代码创建 webpack.config.js：

Elixir.webpack.mergeConfig({

    module: {
        loaders: [{
            test: /\.json$/,
            loader: 'json'
        }]
    }
});

现在您可以在 bootstrap.js 文件中要求需要 json-loader 的包。

附加说明

当您查看定义了 elixir 的 webpack 方法的 index.js 文件时，您会发现 loaders 数组中缺少 json 加载器。

module: {
    loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }]
},

【讨论】：