Реагировать Вавилон полифилл для Object.values ​​() - PullRequest
Новая
       51

Реагировать Вавилон полифилл для Object.values ​​()

0 голосов
/ 09 декабря 2018

В нашем проекте мы много использовали Object.keys() и Object.values()!Поскольку он основан на Magento (1), мы заполнили его с помощью Prototype.js (не зная, что это из-за этого).

Однако мы обнаружили некоторые проблемы с производительностью, которые напрямую связаны с Prototype.js, поэтому мыхочу удалить его.

Я не хочу менять каждое место, где они используются. Вместо этого я хочу хороший полифилл, который загружается только для браузеров, которые по умолчанию его не поддерживают,Я хочу, чтобы полифилл был размещен на наших серверах, чтобы избежать каких-либо странных ошибок, если бы 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'],
        },

пакетов.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/, если он добавляет полифиллы для вещей, у нас уже есть полифилы для ..

За исключением Object.values()у нас, кажется, есть работающие полифилы для всего остального, что нам нужно, поддерживая наиболее часто используемые браузеры последних 2 версий + IE11.

Или мы должны просто добавить: https://www.npmjs.com/package/es7-object-polyfill?

Редактировать: Обновленный вопрос, я видел, что Object.keys() уже работает, но не Object.values().

1 Ответ

0 голосов
/ 10 декабря 2018

Теперь я заметил, что Object.keys() уже работал нормально, но не Object.values(), что, похоже, немного отличается от Object.entries()

Так что я добавил для этого простой полифилл, подобный этому.

index.js 

import './polyfills';

polyfills.js 

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