Связать библиотеку браузера в среде узла - PullRequest
0 голосов
/ 09 июня 2019

Так что в принципе проблема описана в заголовке.Я пытаюсь использовать библиотеку ( quill ), которая работает только в браузерной среде, и в моем проекте у меня есть две конфигурации веб-пакетов, одна для сборки клиента и вторая для сервера.После добавления этого библиотечного сервера сборка завершается сбоем из-за этой строки .Так что проблема здесь в том, что мой веб-пакет не просматривает папку node_modules и не конвертирует эту строку для babel.Поэтому я использовал webpackNodeExternals и добавил этот файл в белый список.После этого моя сборка не удалась, потому что quill использует document где-то в своем коде, и, конечно, document is not defined в узле env.До сих пор я пробовал ProvidePlugin и определял document из jsdom, но затем где-то в quill кодовой базе они используют this.textNode = document.createTextNode(Cursor.CONTENTS);, и моя сборка снова не удалась.вероятно, потому что document из jsdom не совпадает с браузером window.document ...

Решение, которое я ищу, состоит в том, чтобы заставить мой сервер вообще не строить эту библиотеку и ее зависимостиили как-то заменить его чем-то другим только в сборке сервера.Мне это вообще не нужно на стороне сервера, только в клиентской сборке, которая проходит правильно

РЕДАКТИРОВАТЬ: Добавлен webpack.config.js, который используется для сборки сервера

const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv')
const webpackNodeExternals = require('webpack-node-externals')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const StartServerPlugin = require('start-server-webpack-plugin')
const CaseSensetivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin')

const dotenvPath = process.env.DOTENV_PATH
  ? path.resolve(process.cwd(), process.env.DOTENV_PATH)
  : path.resolve(process.cwd(), '.env')

const { parsed: envs = {} } = dotenv.config({ path: dotenvPath })

console.info(
  `Environment was read from '${path.relative(process.cwd(), dotenvPath)}'`
)

const OUTPUT_PATH = path.resolve(__dirname, './build')

module.exports = {
  name: 'webClient/server',
  bail: process.env.NODE_ENV === 'production',
  mode: process.env.NODE_ENV,
  entry: [
    '@babel/polyfill',
    process.env.NODE_ENV === 'development' && 'webpack/hot/poll?666',
    './server'
  ].filter(Boolean),
  output: {
    path: OUTPUT_PATH,
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|scripts)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: process.env.NODE_ENV === 'development'
            }
          },
          {
            loader: 'eslint-loader',
            options: {
              cache: process.env.NODE_ENV === 'development',
              rules: {
                'prettier/prettier': 'off'
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        exclude: /(node_modules|scripts)/,
        use: [
          {
            loader: 'css-loader',
            options: {
              url: false,
              import: false,
              modules: true,
              localIdentName: '[local]___[hash:base64:5]',
              exportOnlyLocals: true,
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      }
    ]
  },
  devtool: 'source-map',
  watch:
    process.env.NODE_ENV === 'development',
  stats: {
    chunks: false,
    colors: true
  },
  target: 'node',
  externals: [
    webpackNodeExternals({
      whitelist: ['webpack/hot/poll?666']
    })
  ],
  optimization: {
    minimizer: [
      process.env.NODE_ENV === 'production' &&
        new TerserWebpackPlugin({
          parallel: true,
          sourceMap: true
        })
    ].filter(Boolean)
  },
  plugins: [
    new CleanWebpackPlugin([OUTPUT_PATH]),
    process.env.NODE_ENV === 'development' &&
      new webpack.HotModuleReplacementPlugin(),
    process.env.NODE_ENV === 'development' &&
      Boolean(process.env.SERVER_WATCH) &&
      new StartServerPlugin({
        name: 'server.js',
        nodeArgs: ['--inspect']
      }),
    new CaseSensetivePathsWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env': Object.assign(
        {
          SERVER: true
        },
        Object.keys(envs).reduce(
          (destination, key) =>
            Object.assign(destination, {
              [key]: JSON.stringify(envs[key])
            }),
          {}
        )
      )
    })
  ].filter(Boolean),
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx', '.json', '.css']
  }
}
...