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

Question

经过几个小时的挖掘，我们决定提出一个关于 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. 也许还有什么要寻找的？

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

Answer 1

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

在我们的登台/生产环境中，我们使用 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']
           }
       ]);
   }