React Babel polyfill for Object.values()

OZZ*_*ZIE 2 javascript polyfills reactjs webpack babeljs

在我们的项目中我们已经使用了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'],
        },
Run Code Online (Sandbox Code Playgroud)

包.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"
Run Code Online (Sandbox Code Playgroud)

如果它为我们已经有polyfills的东西添加了polyfills,我担心只添加https://babeljs.io/docs/en/babel-polyfill/ ..

除了Object.values()我们似乎有可以满足我们需要的所有其他功能的工作填充,支持最常用的浏览器最新 2 个版本 + IE11。

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

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

OZZ*_*ZIE 5

我现在注意到它Object.keys()已经工作正常了,但不是Object.values(),这似乎与Object.entries()

所以我为它添加了一个简单的填充,如下所示。

索引.js

import './polyfills';
Run Code Online (Sandbox Code Playgroud)

polyfills.js

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