Question

因此，基本上在标题中描述了该问题。我正在尝试使用仅在浏览器环境中运行的库（quill），在我的项目中，我有两个Webpack配置，一个用于客户端构建，另一个用于服务器。添加此库服务器后，构建由于this line而失败。所以这里的问题是我的webpack没有查看node_modules文件夹，也没有将这行转换为babel。因此，我使用了webpackNodeExternals并将此文件添加到白名单中。之后，我的构建失败了，因为羽毛笔在其代码中的某个地方使用了document，当然在节点env中也使用了document is not defined。到目前为止，我尝试了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']
  }
}

节点环境上的捆绑浏览器库

0 个答案: