使用 webpack 构建 (React) 同构 web 应用程序的服务器部分,包括 CSS 样式加载器

2024-04-09

我正在尝试制作一个我正在开发的同构 React 应用程序。中的一个这样做的已知问题 https://reactjsnews.com/isomorphic-react-in-real-lifewebpack 加载器允许import/require非 JavaScript 资源(例如 CSS 文件)。例如

// ExampleComponent.jsx
import Select from 'react-select';
import 'react-select/dist/react-select.css';

如果使用 Express 构建应用程序,那么节点将进行此导入并失败,因为它无法处理 CSS 文件,它只需要 javascript(并且感谢babel-register JSX).

解决这个问题的方法之一是使用target: 'node'构建服务器应用程序(包括所有公共部分,例如组件,因为它是同构应用程序)时,webpack 中的选项来构建服务器端代码。这应该会导致server.js正在构建,然后可以由节点运行。

注意:我知道还有其他方法可以解决这个特定问题(例如不使用import/require包含任何不是 javascript 的内容,但在此应用程序的开发阶段不切实际。

// webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = [
  // Client build
  {
    entry: {
      'bundle.min': [
        'bootstrap-webpack!./bootstrap.config.js',
        'babel-polyfill',
        './client/index.jsx'
      ],
      'bundle': [
        'bootstrap-webpack!./bootstrap.config.js',
        'babel-polyfill',
        './client/index.jsx'
      ]
    },
    output: {
      path: './dist',
      filename: '[name].js'
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        include: /\.min\.js$/,
        minimize: true
      })
    ],
    module: {
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['react', 'es2015', 'stage-0']
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['es2015', 'stage-0']
          }
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        { test: /\.png$/,
          loader: "url-loader?limit=100000"
        },

        // Bootstrap
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/font-woff'},
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/octet-stream'
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file'
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=image/svg+xml'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    }
  },

  // Server build
  {
    entry: './server/server.jsx',
    target: 'node',
    node: {
      console: false,
      global: false,
      process: false,
      Buffer: false,
      __filename: false,
      __dirname: false,
    },
    output: {
      path: './dist',
      filename: 'server.js',
    },
    module: {
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['react', 'es2015', 'stage-0']
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['es2015', 'stage-0']
          }
        },
        {
          test: /\.json$/,
          loader: 'json-loader'
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        { test: /\.png$/,
          loader: "url-loader?limit=100000"
        },

        // Bootstrap
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/font-woff'},
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=application/octet-stream'
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file'
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url?limit=10000&mimetype=image/svg+xml'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    }
  }
];

问题是样式加载器利用window这显然在node环境中不存在。

$ node dist/server.js
/Users/dpwrussell/Checkout/ExampleApp/dist/server.js:25925
            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                                       ^

ReferenceError: window is not defined

From here https://github.com/webpack/style-loader/blob/master/addStyles.js#L14在样式加载器中。

感觉我已经非常接近完成这项工作了,所以任何想法都会受到欢迎。


答案是不使用style-loader在你的服务器构建中:它的唯一目的是获取 CSS,将其变成<style>元素,并将其插入到 DOM 中。大多数人似乎都使用提取文本插件 https://github.com/webpack/extract-text-webpack-plugin收集他们的 CSS 以包含在服务器端。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 webpack 构建 (React) 同构 web 应用程序的服务器部分,包括 CSS 样式加载器 的相关文章

  • libicui18n.so.52:无法打开共享对象文件

    我一直在使用 libicu 来检测在 docker ubuntu 内部运行的节点应用程序中的字符集 这是通过模块完成的节点 icu 字符集检测器 https github com mooz node icu charset detector
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • 在 Node.js 中实现服务器发送事件的简单方法?

    我环顾四周 似乎在 Node js 中实现 SSE 的所有方法都是通过更复杂的代码 但似乎应该有一种更简单的方法来发送和接收 SSE 是否有任何 API 或模块可以让这件事变得更简单 这是一个每秒发送一个服务器发送事件 SSE 的 Expr
  • 如何使用 Firestore 中的对象数组更新 Field 中的特定对象? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 所以我有一个emojiCounter字段用于存储对象数组 例如 emojiCounter emoji
  • Node.js 循环发送 http 请求

    我实际上遇到了使用 node js 执行的 javascript 代码的问题 我需要循环发送http请求到远程服务器 我在代码中设置了www google ca 这是我的代码 var http require http var option
  • 如何在React中处理多个路由器

    假设我们有一个网络应用程序 它通常有很多视图 例如索引页面 管理面板 帮助页面 联系人等 我在主index js 中使用react router dom 来处理它们 它工作得很好 但是现在我在开发管理面板时遇到了问题 它是 index js
  • Puppeteer 无法在 VPS (DigitalOcean) 上工作

    我在水滴中数字海洋 https www digitalocean com 我收到这个错误 node 5549 UnhandledPromiseRejectionWarning TimeoutError Navigation Timeout
  • 调用axios成功后如何更新页面?反应

    所以我正在做一个使用的项目Axios with Json server 但我有一个问题 每次我做Patch 我必须在主页上按 F5 才能更新 我想知道如何才能做到这一点 这样它就不会自动发生 My Patch onSubmitDate ev
  • 发生错误。", ExceptionMessage: "提供的 'HttpContent' 实例无效

    尝试将文件添加到 http 休息调用时出现此错误 responseJson 消息 发生错误 ExceptionMessage 提供了无效的 HttpContent 实例 它确实 正在使用 多部分 参数名称 内容 异常类型 System Ar
  • nodeJS exec 不适用于“cd”shell cmd

    var sys require sys exec require child process exec exec cd home ubuntu distro function err stdout stderr console log cd
  • 函数执行后重新调用react hook

    我是反应钩子的新手 我有一个钩子函数 它从 API 接收一系列数据并显示在列表中 function useJobs const jobs setJobs React useState const locations setLocations
  • 哪种反应钩子与 firestore onsnapshot 一起使用?

    我在我的 React Native 应用程序中使用了大量的 Firestore 快照 我也在使用 React hooks 代码看起来像这样 useEffect gt someFirestoreAPICall onSnapshot snaps
  • 发布到 npm 时出现问题

    所以我尝试使用 React 构建一个开源项目并将其推送到 npm 问题是 我的组件虽然在测试环境中运行良好 安装到其他组件 但当我将其发布到 npm 并下载包并尝试访问它时 它给了我一个错误 这是代码的一个小示例 import React
  • 如何将 node_modules 包含在单独的 browserify 供应商包中

    我正在尝试将 AngularJS 应用程序转换为使用 browserify 我已经使用 napa 在 node modules 中安装了所有的 Bower 包 现在我想将它们浏览到一个单独的供应商包中 并将它们声明为 外部 依赖项 我想给他
  • 如何解构 React props 并仍然访问其他 props?

    我很好奇如果我想要所有的 props 但也想要解构单个属性 那么组件的参数 props 是否可以像导入一样解构 我想这更像是一个 JavaScript 问题 而不是一个 React 问题 但是举个例子 import React useEff
  • 在电子生成器反应电子应用程序后,在 Windows 中出现空白屏幕

    在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 这是package json 在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 name SmallBusinessManagement version 0 1
  • Windows 10 中的 npm 安装错误( npm install -g angular-cli )

    node v v4 5 0 npm v 5 0 1 有人在 Windows 10 中安装 angular cli 时遇到过这种问题吗 请尝试以下操作 step 0 运行这个命令 npm uninstall g angular cli npm
  • keystonejs 模型中的动态类型选择

    我想在 adminUI 中使用一个组合框 其中包含来自 Web 服务的字段 我正在考虑使用预 查找 挂钩获取数据 然后覆盖模式中 受众 属性的选项属性 Schema Compliance add title type Types Text
  • 模拟节点外部模块默认使用 jest 的链式方法

    在我们的节点 CLI 中 我们有一个简单的方法 use strict const ora require ora module exports function startSpinner textOnStart color spinnerT
  • 永远运行 Gulp 脚本?

    是否可以运行 Gulp 脚本forever https www npmjs com package forever 我有 Gulp 脚本想要作为守护进程运行 所以我可以启动 停止 列出它 好的 所以我通过将 gulp 二进制文件从 usr

随机推荐

  • 连接 SAP HANA 数据库时调用未定义函数 odbc_connect() 消息

    I used odbc connect 在我的 PHP 页面中连接到 HANA 数据库 当我在本地运行它时效果很好 我将相同的 PHP 页面上传到服务器中 但收到此错误 致命错误 调用未定义的函数 odbc connect 代码 conne
  • 有人可以解释一下 Google Chrome 内存缓存吗?

    根据this https developer chrome com extensions webRequest CachingAPI 文档 这是我找到的唯一描述内存缓存的来源 Chrome 使用两种缓存 磁盘缓存和非常快的内存中缓存 缓存
  • Android新构建系统(gradle)和aspectj

    在 Google IO 中 宣布新的构建系统 gradle 将会取代 ant 我的项目正在使用aspectj 我想在我的项目中使用它 我无法找出一些变量来让它工作 我在那里找不到 android 输出类路径 有人可以帮忙吗 这是我当前的 b
  • Tipsy live 不适用于 jQuery 1.9.0

    我们最近将 jQuery 升级到了 1 9 0 但它破坏了我们的醉酒插件 它是live功能现在会导致错误 tooltip abbr tipsy live true TypeError this binder is not a functio
  • 如何修复 css({ float: 'left' }) [重复] 上的闭包编译器错误

    这个问题在这里已经有答案了 可能的重复 Google Closure 编译器解析错误 属性 ID 无效css float left https stackoverflow com questions 6611867 google closu
  • Android MotionEvent.ACTION_MASK

    在 OnTouchEvent 中 如果您使用以下命令切换不同的触摸操作 switch e getAction 它处理 ACTION DOWN 和 ACTION MOVE 但由于某种原因它不会捕获 ACTION POINTER DOWN 而如
  • 使用 T-Sql,如何将远程服务器上的一个表插入到本地服务器上的另一个表中?

    给定远程服务器 生产 当前可通过 IP 访问 和本地数据库 开发 我如何运行INSERT使用 T SQL 从 生产 进入 开发 我使用的是 MS SQL 2005 两个数据库之间的表结构有很大不同 因此我需要手动编写一些迁移脚本 UPDAT
  • 从 Excel 中选定的选项卡中选取数据

    我有以下问题 我有一个包含许多选项卡的文件 每个选项卡的名称是一个国家 地区 选项卡中包含有关该国家 地区的各种数据 我想创建一个界面选项卡 用户可以在其中将国家 地区名称放入单元格中 例如 法国 单元格 A1 将数据项放入另一个单元格中
  • Hbase 列族

    Hbase 文档表示 避免创建超过 2 3 个列族 因为 Hbase 不能很好地处理超过 2 3 个列族 其原因在于压缩和刷新 以及 IO 但是 如果我的所有列总是填充 对于每一行 那么我认为这个推理并不那么重要 因此 考虑到我对列的访问是
  • C# 命名空间是否编译为 IL 文件作为“完整”名称?

    例如 如果我有 namespace a namespace b class C class D 那么编译完成后 IL文件中的命名空间信息在哪里呢 我是否会得到两个名为 a b C 和 a b D 的类 其中类名以命名空间名称为前缀 或者我在
  • 在Delphi中销毁COM对象

    有一些 net程序集 通过COM在delphi中调用它 var intf ITest intf CreateComObject CLASS TEST as ITest here comes some stuff 我必须做点什么来破坏它以释放
  • COM 互操作、隔离和排除重复引用

    我们在我们编写的 C dll 程序集 A 中使用 Microsoft 提供的 COM DLL dsofile dll 为了避免必须注册 COM dll 我已将对 dsofile dll 的引用的isolated 属性切换为 true 这意味
  • 使用 CSS3 在文本上创建双色锐渐变

    我需要为我正在构建的网站上的标题和导航文本创建 锐利 渐变 我正在尝试使其尽可能纯 HTML5 CSS3 并且愿意坚持使用 font face而不是转移到Cufon 我所说的锐渐变是指两种颜色 两者之间没有混合 例子 http dl dro
  • Apache NIFI Jon 不会自动终止

    我是 Apache NIFI 工具的新手 我正在尝试从 mongo db 导入数据并将该数据放入 HDFS 中 我创建了 2 个处理器 第一个用于 MongoDB 第二个用于 HDFS 并且我正确配置了它们 该作业正在成功运行并将数据存储到
  • 由于错误而导致代码崩溃:无法从空集合中删除最后一个元素

    我正在尝试绘制一些数据图表 以下代码最初可以工作 并且有时可以工作 但现在似乎大部分崩溃 我认为 json 函数中的 if let data data 行意味着它只会运行一旦它收到数据 我有一种感觉 也许该函数在完全加载之前正在解包数据 但
  • 基于 STOMP 身份验证的 Spring 4 WebSocket

    我正在开发一个基于 Spring 4 WebSocket 的多人游戏 我的服务器是无状态的 因此为了识别玩家 我使用令牌 经过一段时间的努力 如何通过 WebSockets 识别玩家 我想出了这个解决方案 在客户端玩家寄存器上 如下所示 v
  • 如何计算 CRC 中使用的 XOR 余数?

    我试图记住如何计算循环冗余检查中的 XOR 算法的剩余部分以验证网络消息的剩余位 我不应该扔掉那本教科书 这在代码中很容易完成 但是如何手动计算出来呢 我知道它看起来像标准除法算法 但我不记得从那里去哪里获得余数 1010 10110100
  • RubyMine 对 jQuery 的支持

    我正在使用 RubyMine 3 1 开发 Rails3 应用程序 今天我从 Prototype 切换到 jQuery 以满足我的 UJS 需求 使用自定义一切后这个例子 http www stjhimy com posts 7 creat
  • 有没有通过 fstat() 的 POSIX 方法来检查文件是否是符号链接?

    有没有 POSIX 方式通过fstat 2 检查文件是否是符号链接 有旗帜O NOFOLLOW in open 2 可以检查它 但是 它不是 POSIX 有S ISLNK in fstat 2 其中说man fstat The S ISLN
  • 使用 webpack 构建 (React) 同构 web 应用程序的服务器部分,包括 CSS 样式加载器

    我正在尝试制作一个我正在开发的同构 React 应用程序 中的一个这样做的已知问题 https reactjsnews com isomorphic react in real lifewebpack 加载器允许import require