Реагируйте - Babel Polyfill по какой-то причине не предотвращает исключения в Set или Weakmap, но выполняет Promise - PullRequest
Новая
       15

Реагируйте - Babel Polyfill по какой-то причине не предотвращает исключения в Set или Weakmap, но выполняет Promise

2 голосов
/ 27 апреля 2019

Я пытаюсь обеспечить некоторую перекрестную совместимость с IE 10. Я использовал Babel Polyfill, чтобы преодолеть исключение Promise для IE 11, но для IE 10 я получаю исключения для Set и Weakmap, которые Babel Polyfill должен исправить как я понял, они тоже были включены.

Это был мой первый проект React / React-static, поэтому, если честно, я летал рядом с моими штанами, надеясь, что кто-то сможет помочь / объяснить вещи простым и понятным способом.

К вашему сведению: значение Set не определено в файле main.js, созданном с помощью реагирующей статической сборки. И Weakmap находится в модуле горячего перезагружения, что является проблемой только в режиме разработки.

Файл My App.js: 

import "babel-polyfill";
import React from "react";
import { Router, Link } from "react-static";
import { hot } from "react-hot-loader";
import Routes from "react-static-routes";

import "./sass/app.scss";
import "./sass/_base.scss";
import "./sass/_layout.scss";
import "./sass/_utilities.scss";
import "./sass/main.scss";

import "./sass/_components.scss";

const App = () => (
    <Router>
        <div>
            <Routes />
        </div>
    </Router>
);

export default hot(module)(App);

Мой файл static.config.js: 

import ExtractTextPlugin from "extract-text-webpack-plugin";

export default {
    getSiteData: () => ({
        title: "React Static"
    }),
    getRoutes: async () => {
        // const { data: posts } = await axios.get(
        //  "https://jsonplaceholder.typicode.com/posts"
        // );
        return [
            {
                path: "/",
                component: "src/containers/Home"
            },
            {
                path: "/about",
                component: "src/containers/About"
            },
            {
                path: "/services",
                component: "src/containers/Services"
            },
            {
                path: "/cases",
                component: "src/containers/Cases"
            },
            {
                path: "/process",
                component: "src/containers/Process"
            },
            {
                path: "/contact",
                component: "src/containers/Contact"
            },
            {
                path: "/contactsent",
                component: "src/containers/Contactsent"
            },
            {
                is404: true,
                component: "src/containers/404"
            }
        ];
    },
    webpack: (config, { defaultLoaders, stage }) => {
        let loaders = [];

        if (stage === "dev") {
            loaders = [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
            ];
        } else {
            loaders = [
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 1,
                        minimize: stage === "prod",
                        sourceMap: false
                    }
                },
                {
                    loader: "sass-loader",
                    options: { includePaths: ["src/", "src/sass/"] }
                }
            ];

            // Don't extract css to file during node build process
            if (stage !== "node") {
                loaders = ExtractTextPlugin.extract({
                    fallback: {
                        loader: "style-loader",
                        options: {
                            sourceMap: false,
                            hmr: false
                        }
                    },
                    use: loaders
                });
            }
        }

        config.module.rules = [
            {
                oneOf: [
                    {
                        test: /\.s(a|c)ss$/,
                        use: loaders
                    },
                    defaultLoaders.cssLoader,
                    defaultLoaders.jsLoader,
                    defaultLoaders.fileLoader
                ]
            }
        ];
        return config;
    }
};

Мой пакет.json: 

{
  "name": "react-static-example-basic",
  "version": "1.0.1",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "react-static start",
    "stage": "react-static build --staging",
    "build": "react-static build",
    "serve": "serve dist -p 3000"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "core-js": "^3.0.1",
    "es6-promise": "^4.2.6",
    "promise-polyfill": "8.1.0",
    "raf": "^3.4.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.2.0",
    "react-spring": "^8.0.5",
    "react-static": "^5.9.7"
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "eslint-config-react-tools": "1.x.x",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "serve": "^6.1.0"
  }
}

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Не знаком с реактивной статикой как таковой, но из того, что я испытал при работе с проектами с реагированием и веб-пакетом:

  • polyfill babel необходимо перейти на html-страницу в качестве первого тега сценария и не может быть упакован как часть веб-пакета (я не помню точных причин)
  • В проектах, не связанных с Babel, мне удалось убедить IE10 играть в мяч, используя: https://github.com/paulmillr/es6-shim
0 голосов
/ 07 мая 2019

Возможно, стоит попробовать отдельно установить core-js , включив в сборку такие модули: 

npm i --save core-js

import "core-js/es/set";
import "core-js/es/weak-map";

Если это не поможет, попробуйте использовать polyfill.io :
Добавьте ваш html it: 

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=WeakMap%2CWeakSet%2CSet"></script>
...