Question

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

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

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

"time_zone": "+01:00"

我的.eslintrc.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;
  }
});

我的polyfills.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
  }
};

在IE11中，我得到了：

对象不支持属性或方法“包含”

有人可以在这里帮忙吗？

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上运行。

未在其他JS之前加载NextJS polyfills

1 个答案: