使用 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 样式加载器 的相关文章

随机推荐

  • 连接 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