解决 Webpack 中的原生 Node 模块依赖？

Question

我正在使用Webpack来处理一个连接 Discogs API 的库，称为disconnect。在我开始使用断开连接库中的一些选择方法之前，一切都很好地捆绑在一起。事实证明，该库使用的一些模块是原生 Node 模块，并且该库不正式支持客户端 JS 环境。

但是，我有一种预感，它不会做任何需要 Node 环境的事情；而且我很想在放弃之前尽可能地在客户端上做。阻碍我的实验的依赖项之一是一个名为querystring的本地 Node 模块（据我所知，与环境无关）。这个模块是disconnect需要的，但没有在disconnect的package.json 中列出，因为它期望在查询字符串本地可用的 Node 环境中运行。

我想要做的是让 Webpack 捆绑 Node 的本机查询字符串模块，以便我的依赖断开连接可以继续使用它。

对于那些想要陷入困境的人，我在浏览器中遇到的具体错误是：

Uncaught TypeError: queryString.escape is not a function at Object.util.escape (util.js:38) at Object.collection.getReleases (collection.js:87) at eval (app.js:14) at Object. (app.js:47) at webpack_require (app.js:20) at app.js:40 at app.js:43

我的package.json：

{
  "name": "some-app",
  "version": "0.0.1",
  "description": "",
  "main": "src/js/app.js",
  "scripts": {
    "dev": "npm run clean && npm run build:html && npm run build:webpack-development",
    "pro": "npm run clean && npm run build:html && npm run build:webpack-production",
    "clean": "rm -rf build",
    "build:webpack-development": "NODE_ENV=development webpack --color --display-modules",
    "build:webpack-production": "NODE_ENV=production webpack --color",
    "build:html": "mkdir -p build && cp -f src/index.html build/index.html"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-es2016": "^6.16.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "json-loader": "^0.5.4",
    "node-sass": "^4.3.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-livereload-plugin": "^0.9.0",
    "querystring": "^0.2.0",
    "disconnect": "^1.0.2"
  }
}

我的webpack.config.js：

var path = require('path')

var LiveReloadPlugin = require('webpack-livereload-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var dev = process.env.NODE_ENV === "development"

module.exports = {
  devtool: dev ? 'eval' : false,
  watch: dev,
  entry: {
    app: path.resolve(__dirname, "src/js/app.js")
  },
  output: {
    path: path.resolve(__dirname, "build/js"),
    filename: "[name].js"
  },
  module: {
    loaders: [
      { 
        test: /\.json$/, 
        loader: "json-loader" 
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "src/js"),
        loader: "babel-loader",
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'es2016']
        }
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, "src/sass"), 
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  resolve: {
    extensions: ['', '.js']
  },
  plugins: [
    new LiveReloadPlugin(),
    new ExtractTextPlugin("../css/app.css")
  ]
}

我的src/js/app.js：

import * as disconnect from 'disconnect'

let Discogs = disconnect.Client

var col = new Discogs().user().collection();
col.getReleases('some-user', 0, {page: 2, per_page: 75}, function(err, data){
    console.log(data);
});

使用npm install && npm run dev.