HTML元素的属性文本实际上在字符之间添加了空格或如何找出正在改变元素属性的内容？

如何解决HTML元素的属性文本实际上在字符之间添加了空格或如何找出正在改变元素属性的内容？

我最近发现了一个我无法解释的问题，并且我不知道如何调试才能发现正在改变的事物。刚开始时，我将无法设置repro环境，因为我不知道是什么原因造成的。我只能解释自己所看到的内容，看看是否有人看到或知道如何弄清楚发生了什么。

因此，正如标题所述，我的页面上有一个正常开始的元素，但是在某个时候，元素的class属性之一（即“ class1 class2 etc”）实际上在每个元素之间放置了一个空格字符（例如“ 1级2级等”）。

此情况发生在包含两个JavaScript程序包的页面上，这两个程序包都与Webpack一起打包，并且都使用Babel。这个问题仅发生在IE11中，因此Babel转换也使用了许多core-js的polyfill，其中我使用的是core-js3。这在两个软件包中都是相同的。我已经在这些软件包的各种版本中看到了此问题，并且其中某些组合未显示该问题，但是一个软件包的某些版本会始终导致该问题。而且，通过将一个软件包隔离在一个软件包中，然后更改另一个并看到事物发生变化，证明了这两个软件包都能够引起这种情况。因此，我倾向于将其与依赖项相关联（例如，webpack，babel，core-js或其他，但是这些是主要内容）。当我查看了哪些软件包的优缺点时，我已经比较了构建输出，但是没有发现任何原因。

下面是我上面描述的class属性的屏幕截图：

所以，我的问题：

有没有人看过这个结果，并且知道为什么会发生？最好找到一个看到了这个并且知道是什么原因造成的。
除此以外，是否有人知道如何隔离属性更改（在这种情况下为类属性更改），并查看其原因？我尝试过IE11“性能”工具，并找到了“样式计算”，它在发生此属性更改时在其中计算更改，但是我无法从那里得知可能由JavaScript代码实际进行了更改。有什么办法吗？在IE11中，因为这是我看到的唯一地方。

就像我说的那样，这是一个非常奇怪的问题，所以我真的不希望得到任何答案，但是如果有人对如何做有任何帮助或想法，我将不胜感激。谢谢。

编辑：添加一些配置，这完全是标准的

软件包1（非UI组件）：套餐1 Babel Config：

module.exports = {
"presets": [
    [
        "@babel/preset-env",{
            targets: {
                browsers: [
                    "> 0.25%","last 2 versions","ie 11","edge 18","safari >= 11","not dead"
                ]
            },corejs: 3,useBuiltIns: "usage",debug: false
        }
    ]
],"ignore": [
    /babel-/,/@babel\/runtime/,/core-js/,/regenerator-runtime/
],"plugins": [
    [
        "@babel/plugin-proposal-decorators",{
            legacy: true
        }
    ],[
        "@babel/plugin-proposal-class-properties",{
            loose: true
        }
    ],[
        "@babel/plugin-transform-runtime",{
            regenerator: true,corejs: 3
        }
    ]
],"sourceMaps": true,"sourceType": "unambiguous"
};

打包1 Webpack配置（合并在一起）：

（常见）：

{
entry: path.join( __dirname,'src','Main.js' ),devtool: 'source-map',output: {
    devtoolNamespace: 'APPNAME'
},module: {
    rules: [
        {
            enforce: 'pre',test: /\.js$/,loader: 'eslint-loader',exclude: [
                /node_modules/
            ]
        },{
            test: /\.js$/,loader: 'babel-loader',}
    ]
},plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })
]
};

（生产）：

{
mode: 'production',output: {
    path: path.join(__dirname,'dist'),filename: libnamemin
},optimization: {
    moduleIds: 'total-size',mangleWasmImports: true,concatenateModules: false,minimizer: [
        new BabelMinifyPlugin({
            removeDebugger: true,mangle: true
        },{
            comments: false,sourceMap: 'source-map'
        })
    ]
},module: {
    rules: []
},plugins: [
    new CleanWebpackPlugin(),new BundleAnalyzerPlugin({
        analyzerMode: 'static',openAnalyzer: false,generateStatsFile: true,reportFilename: path.join(__dirname,'./reports/bundle/report.html'),statsFilename: path.join(__dirname,'./reports/bundle/stats.json')
    })
]
};

程序包2（使用“ customElements”的UI组件，在IE11中为“ webcomponentsjs” polyfill）套餐2 Babel配置：

module.exports = {
"presets": [
    [
        "@babel/preset-env",/regenerator-runtime/,/webcomponentsjs/,/@webcomponents/
],corejs: 3
        }
    ],[
        "@babel/plugin-syntax-dynamic-import",{ }
    ]
],"sourceType": "unambiguous"
};

Package 2 Webpack配置（合并在一起）：

（常见）

{
entry: path.join( __dirname,'App.js' ),{
            test: /\.(svg|png|woff|woff2)$/,loader: 'url-loader'
        },{
            test: /\.css|\.s(c|a)ss$/,use: [
                'to-string-loader',{
                    loader: 'css-loader',options: {
                        importLoaders: 1
                    }
                },{
                    loader: 'sass-loader',options: {
                        sassOptions: {
                            importer: jsonImporter()
                        }
                    }
                }
            ]
        },options: {
                root    : __dirname,rootMode: 'upward-optional'
            }
        }
    ]
},plugins: [
    new UnusedFilesWebpackPlugin({
        patterns: ['./src/resources/images/*','./src/resources/logos/*'],}),new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })
]
};

（生产）：

{
mode: 'production','build'),filename: 'APPNAME.min.js'
},new webpack.DefinePlugin({
        'process.env.__TF_NAME__': JSON.stringify(pkg.name),'process.env.__TF_VERSIONBUILD__': JSON.stringify('__METADATA_VERSION_BUILD__'),'process.env.__TF_VERSION__': JSON.stringify('__METADATA_VERSION__'),'process.env.__TF_BUILDDATE__': JSON.stringify((new Date(Date.now())).toUTCString())
    }),'./reports/bundle/stats.json'),})
]
};

解决方法

对于Google而言，这不是一个简单的问题，但是我能够在尝试的同时找到这篇文章！

最终，我能够通过（乏味的）调试找到问题的原因。原来是ERROR: usage: pytest [options] [file_or_dir] [file_or_dir] [...] pytest: error: argument --cov-fail-under: invalid validate_fail_under value: '$('出现问题的结果：

https://github.com/zloirock/core-js/issues/751

使用以下命令降级可以解决此问题：

core-js

HTML元素的属性文本实际上在字符之间添加了空格或如何找出正在改变元素属性的内容？

如何解决HTML元素的属性文本实际上在字符之间添加了空格或如何找出正在改变元素属性的内容？

解决方法

相关推荐