Webpack Config для сборки SDK как для узла, так и для браузера

Question

Может ли кто-нибудь помочь мне выяснить, каким должен быть конфигурационный файл sdk для создания 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, он выдаст следующую ошибку

• 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/ cook ie. js и еще 1
  friendly-errors 09: 06: 34
• tls in ./node_modules/forever-agent/index.js, ./node_modules/tunnel- агент / индекс. js

Может ли кто-нибудь помочь мне в устранении вышеуказанной ошибки?

Answer 1

Подход с несколькими точками входа здесь не самая лучшая идея, поскольку вы объединяете две разные цели (узел и браузер) с одинаковой конфигурацией

Лучше было бы экспортировать массив с двухконфигурацией как-то так (и в этом подходе вы можете использовать несколько точек входа, чтобы разделить ваш браузер и другие вещи, чтобы сделать ваш сайт более производительным)

в 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' }
    ]
  }
}

вы также можете создать это в том же файле и уменьшить дублирование (в зависимости от того, что вам подходит ) Я показал этот подход с двумя различными файлами для ясности

Answer 2

создайте файл в качестве точки входа для сервера, а другой - для браузера.

let baseConfig = {
  mode: 'production',
  entry: ['browser.ts','server.ts'],
  ...
}

browser.ts содержит все параметры браузера c logi c, а server.ts содержит все данные сервера c logis.