Question

我正在使用Webpack来使用与名为disconnect的Discogs API连接的库。所有这些都很好地捆绑，直到我开始使用断开连接库中的一些选择方法。事实证明，库使用的一些模块是本机Node模块，并且库不正式支持客户端JS环境。

但是，我预感到它没有做任何需要Node环境的事情;在放弃之前，我渴望尽可能地在客户端尽力而为。阻碍我的实验的依赖之一是一个名为querystring的本地Node模块（据我所知，环境无关）。 disconnect 需要此模块，但未在 disconnect 的 package.json 中列出，因为它预计将在查询字符串本身可用的节点环境。

我想要做的是拥有Webpack bundle Node的本地 querystring 模块，这样我的依赖 disconnect 可以继续使用它。

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

未捕获TypeError：queryString.escape不是函数 at Object.util.escape（util.js：38） at Object.collection.getReleases（collection.js：87）在eval（app.js：14）在对象。（app.js：47）在 webpack_require （app.js：20）在app.js：40 在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构建。

解决Webpack中的本机Node模块依赖关系？

0 个答案: