时间戳

首页 > 解决方案 > 为什么 HTML 属性在 DOM 中设置不同？

javascript - 为什么 HTML 属性在 DOM 中设置不同？

问题描述

经过几个小时的挖掘，我们决定提出一个关于 SO 的问题，希望其他人可以帮助解决以下问题。

  1. 对于我们的一个 Web 应用程序，我们使用了Onsen UI js 框架及其React 支持库
  2. 当我们尝试在我们的开发环境中渲染应用程序时，一切似乎都可以正常工作，但是当我们在我们的暂存环境中尝试它时，一些组件的行为会有所不同

  3. 到目前为止我们发现：似乎在我们的暂存环境中，一些 HTML 属性在 DOM 中的设置不同：

    |----------------|---------------|--------------|
| HTML attribute |    DEV ENV    | STAGING ENV  |
|----------------|---------------|--------------|
| fixed-content  | fixed-content | fixedcontent |
|----------------|---------------|--------------|
| active-index   | active-index  |     index    |
|----------------|---------------|--------------|

因此，Onsen 框架无法找到 HTML 元素上的属性并且行为不同，无论：

  1. 我们使用相同的浏览器（使用 Chrome、Edge、Firefox 检查）
  2. 我们在两个环境中加载了相同的 JS 代码

envs之间有什么区别：

  1. JS 文件本地存储在我们的开发机器和 S3 上，用于我们的暂存环境。
  2. 我们在暂存环境中使用加密连接
  3. Accept-Encoding 标头gzip, deflate在本地和gzip, deflate, br暂存
  4. 也许还有其他要寻找的东西？

有人知道这里到底发生了什么吗？

标签： javascripthtmlreactjsonsen-ui

解决方案

我们实际上发现了问题并且解决方案非常简单，尽管我们花了几个小时才找到它。

在我们的暂存/生产环境中，我们使用 babel 插件transform-react-remove-prop-types来剥离 React 属性类型。

不幸的是，Onsen UI React 支持库依赖于其组件定义的 prop 类型，因此当它们被剥离时，库开始表现不同。

我们做了什么：

  1. 我们将 babel 插件更新为版本0.3.3，以便能够使用该ignoreFilenames选项

  2. 我们跳过了保存 Onsen UI React 库代码的文件

    if (cli.production) {
    config.babel.plugins.push([
        'transform-react-remove-prop-types',
        {
            ignoreFilenames: ['projectleader']
        }
    ]);
}

推荐阅读