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

Question

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

对于我们的一个 Web 应用程序，我们使用了 Onsen UI js framework with its React support library
当我们尝试在我们的开发环境中呈现应用程序时，一切似乎都正常工作，但是当我们在我们的暂存环境中尝试时，一些组件的行为有所不同

到目前为止我们发现了什么：似乎在我们的暂存环境中，某些 HTML 属性在 DOM:

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

因此，Onsen 框架无法在 HTML 元素上找到属性，并且不管怎样都会有不同的行为：

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

envs之间有什么区别：

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

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

Answer 1

我们确实找到了问题，解决方案也很简单，尽管我们花了几个小时才找到它。

在我们的 staging/production 环境中，我们使用 babel 插件 transform-react-remove-prop-types 去除 React 道具类型。

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

我们做了什么：

我们将 babel 插件更新到版本 0.3.3 以便能够使用 ignoreFilenames 选项

我们跳过了包含 Onsen 代码的文件 UI React 库

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

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

Why are HTML attributes set differently into the DOM?

html

javascript

reactjs

onsen-ui