React Babel polyfill for Object.values()



在我们的项目中,我们经常使用Object.keys()Object.values()!由于它是基于Magento(1(的,我们已经用Prototype.js对其进行了聚合填充(不知道它来自于此(。

然而,我们发现了一些似乎与Prototype.js直接相关的性能问题,因此我们希望将其删除

我不想更改它们使用的每个位置相反,我想要一个好的polyfill,它只为默认情况下不支持它的浏览器加载。我希望polyfill也托管在我们的服务器上,以避免在cdn关闭时出现任何奇怪的错误(我们有自己的cdn解决方案(。

Babel的一切对我来说都有点困惑。Webpack对我来说也是半新的,有时会让人困惑。。webpack.config的语法似乎发生了变化,由于我们使用的是一些较旧的规范,试图遵循文档并在谷歌上搜索答案会更加令人困惑。我想我们应该很快更新到新的规格。

我们今天有这个,相关部分,

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const BUILD_DIR = path.resolve(__dirname, 'build/');
const APP_DIR = path.resolve(__dirname, 'src/');
module.exports = function config(env, argv = {}) {
return {
entry: ['core-js', 'formdata-polyfill', 'whatwg-fetch', `${APP_DIR}/index.js`],
output: {
path: BUILD_DIR,
filename: 'react-frontend.js',
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [
path.resolve(__dirname, 'src/'),
'node_modules',
],
alias: {
companyName: path.resolve(__dirname, './src/companyName.js'),
},
},
module: {
loaders: [
{
test: /.jsx?$/,
include: APP_DIR,
loader: ['babel-loader', 'eslint-loader'],
},

packages.json

{
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-proto-to-assign": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017-node7": "^0.5.2",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"core-js-bundle": "^3.0.0-alpha.1",
"formdata-polyfill": "^3.0.12",
"react": "^16.3.0",
"webpack": "^3.11.0",
"whatwg-fetch": "^2.0.4"

我害怕只是添加https://babeljs.io/docs/en/babel-polyfill/如果它为我们已经有polyfill的东西添加polyfill。。

除了Object.values()之外,我们似乎还可以使用polyfill来满足其他需要,支持最常用的浏览器,最新的2个版本+IE11。

或者我们应该添加:https://www.npmjs.com/package/es7-object-polyfill?

编辑:更新的问题,我看到Object.keys()已经在工作,但Object.values()没有。

我现在注意到Object.keys()已经运行良好,而不是Object.values(),这似乎与Object.entries()略有不同

所以我添加了一个简单的polyfill。

index.js

import './polyfills';

polyfills.js

const objectToValuesPolyfill = (object) => {
return Object.keys(object).map(key => object[key]);
};
Object.values = Object.values || objectToValuesPolyfill;

最新更新