反应Babel polyfill用于Object.values()

时间:2018-12-09 14:20:48

标签: javascript reactjs webpack babeljs polyfills

在我们的项目中,我们经常使用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/

除了Object.values()之外,我们似乎还可以满足其他所有需要的工作,并支持最常用的浏览器最新版本2和IE11。

还是我们应该添加:https://www.npmjs.com/package/es7-object-polyfill吗?

编辑::问题已更新,我发现Object.keys()已经可以运行,但Object.values()尚未运行。

1 个答案:

答案 0 :(得分:1)

我现在注意到 $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); $objWriter->save('php://output'); $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); $objWriter->save('excel-files/' . $fileName . '.xls'); exit; } } 已经可以正常工作了,但是还不能运行Object.keys(),这似乎与Object.values()略有不同

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

index.js

Object.entries()

polyfills.js

import './polyfills';