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

Question

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

1. 对于我们的一个网络应用程序，我们使用了 Onsen UI Node.js 框架及其 React support library
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 代码

环境之间有什么区别:

1. JS 文件本地存储在我们的开发计算机上以及我们的临时环境的 S3 上。
2. 我们在暂存环境上使用加密连接
3. Accept-Encoding header 在本地为 gzip, deflate，在暂存时为 gzip, deflate, br
4. 也许还需要寻找其他东西？

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

Answer 1

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

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

不幸的是，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']
           }
       ]);
   }