node.js - Webpack Config 为 Node 和 Browser 构建 sdk

Question

有人可以帮我弄清楚为网络和浏览器构建 sdk 的 webpack sdk 配置应该是什么吗？

我当前的配置如下

const path = require('path');

let baseConfig = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'sdk/js-sdk.js',
    libraryTarget: 'umd',
    library: 'jsSdk',
    globalObject: 'this'
  },
  resolve: {
    extensions: [ ".ts", ".js"]
  },
  externals: {
    "request-promise-native": "request-promise-native",
    "request": "request"
  },
  module: {
    rules: [
    { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
}

module.exports = baseConfig

我正在使用以下命令构建

  "pn-dev-build": "rm -rf dist && npm version patch && webpack --mode=development && npm publish --registry http://localhost:4873",

然后，如果我将其安装在我的 vue-nuxt 项目中，则会出现以下错误

• fs in ./node_modules/request/lib/har.js friendly-errors 09:06:34
• net in ./node_modules/forever-agent/index.js, ./node_modules/tough-cookie/lib/cookie.js and 1 other
  friendly-errors 09:06:34
• tls in ./node_modules/forever-agent/index.js, ./node_modules/tunnel-agent/index.js

有人可以帮我解决上述错误吗？

Answer 1

多入口点方法在这里不是最好的主意，因为您正在使用相同的配置捆绑两个不同的目标( Node 和浏览器)

更好的方法是使用 two configuration 导出数组像这样的东西(在这个方法中，您可以使用多个入口点来分割您的浏览器包和其他东西，以使您的网站高性能)

在 webpack.config.js 中(使用此文件作为 Webpack 配置)

const webpackBrowserConfig = require("./webpack.config.browser.js");
const webpackServerConfig = require("./webpack.config.server.js");

module.exports = [webpackServerConfig, webpackBrowserConfig];

在webpack.config.browser.js

module.exports = {
  target: 'web',
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    // your browser related config
  },
  resolve: {
    extensions: [ ".ts", ".js"]
  },
  externals: {
    "request-promise-native": "request-promise-native",
    "request": "request"
  },
  module: {
    rules: [
    { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
}

和webpack.config.server.js

module.exports = {
  target: 'node',
  mode: 'production',
  entry: './src/serverIndex.ts',
  output: {
    path: path.resolve(__dirname, 'dist')
    // your server related config
  },
  resolve: {
    extensions: [ ".ts", ".js"]
  },
  externals: {
    "request-promise-native": "request-promise-native",
    "request": "request"
  },
  module: {
    rules: [
    { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
}

您还可以在同一个文件中创建它并减少一些重复(无论哪个对您有用)，为了清楚起见，我用两个不同的文件展示了这种方法