NextJS polyfills在其他JS之前未加载

Question

我正在使用https://github.com/zeit/next.js/，并查看了示例：

1. https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less
2. https://github.com/zeit/next.js/tree/canary/examples/with-redux
3. https://github.com/zeit/next.js/tree/canary/examples/with-polyfills

我合并了三个项目，以便可以将ant design和redux与polyfill一起使用。到目前为止，它在Chrome中仍然可以运行，但是现在似乎无法正确加载polyfill。

我的next.config.js看起来像这样：

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  },
  webpack: (config, {
    isServer,
    defaultLoaders
  }) => {
    const originalEntry = config.entry;
    config.entry = async() => {
      const entries = await originalEntry();

      if (
        entries["main.js"] &&
        !entries["main.js"].includes("./polyfills.js")
      ) {
        entries["main.js"].unshift("./polyfills.js");
      }

      return entries;
    };

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        defaultLoaders.babel,
        {
          loader: require("styled-jsx/webpack").loader,
          options: {
            type: "scoped",
            javascriptEnabled: true
          }
        },
        "sass-loader"
      ]
    });

    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }
    return config;
  }
});

我的.eslintrc.js看起来像这样：

module.exports = {
  extends: ["airbnb"],
  env: {
    browser: true
  },
  parser: "babel-eslint",
  rules: {
    indent: 0,
    "comma-dangle": [
      2,
      {
        arrays: "always-multiline",
        objects: "always-multiline",
        imports: "always-multiline",
        exports: "always-multiline",
        functions: "ignore"
      }
    ],
    "max-len": 1,
    "arrow-parens": 0,
    "import/no-named-as-default": 0,
    "import/no-extraneous-dependencies": 0,
    "no-nested-ternary": 0,
    "no-use-before-define": 0,
    "react/jsx-props-no-spreading": 0,
    "react/prop-types": 1,
    "react/no-array-index-key": 1,
    "react/no-did-mount-set-state": 0,

    "jsx-a11y/label-has-for": [
      2,
      {
        components: ["Label"],
        required: {
          some: ["nesting", "id"]
        },
        allowChildren: true
      }
    ],
    "jsx-a11y/click-events-have-key-events": 1,
    "jsx-a11y/no-noninteractive-element-interactions": 1,
    "jsx-a11y/anchor-is-valid": 1,
    "jsx-a11y/no-static-element-interactions": 1
  }
};

我的polyfills.js：

/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import includes from 'core-js/library/fn/string/virtual/includes';
import repeat from 'core-js/library/fn/string/virtual/repeat';
import assign from 'core-js/library/fn/object/assign';

// Add your polyfills (from IE10 is supported by default)
// This files runs at the very beginning (even before React and Next.js core)

String.prototype.includes = includes;
String.prototype.repeat = repeat;
Object.assign = assign;

在IE11中，我得到：

对象不支持属性或方法'includes'

有人可以帮忙吗？

Answer 1

我认为您所缺少的实际上是Array.includes。

我正在使用nextjs，与core-js @ 3一起使用，必须在我的polyfill中添加

import 'core-js/features/object/values';
import 'core-js/features/object/entries';
import 'core-js/features/object/get-own-property-symbols';
import 'core-js/features/array/includes';

这些之后，我得以使其在IE11上正常工作。