Как правильно использовать babel / corejs3 / webpack для IE11? - PullRequest
Новая
       22

Как правильно использовать babel / corejs3 / webpack для IE11?

5 голосов
/ 05 апреля 2020

С моей текущей конфигурацией (см. Ниже), я получаю эту ошибку: 

   [object Error]{description: "Argument ob...", message: "Argument ob...", name: "TypeError", number: -2147418113, stack: "TypeError: ...", Symbol()_7.bs7gi3oa3wi: undefined}

Я пытался копать, основываясь на Symbol()_ ... : undefined}, но я не смог найти четкого указания.

Это мой .babel.config.js: 

module.exports = function (api) {
    api.cache(true);
    const presets = [
      [
        '@babel/preset-env',
        {
         // modules: false,
          corejs:"3.6.4",
          useBuiltIns: 'usage',
          targets: {
            browsers: [
              "edge >= 16",
              "safari >= 9",
              "firefox >= 57",
              "ie >= 11",
              "ios >= 9",
              "chrome >= 49"
            ]
          }
        }
      ]
    ];
    const plugins= [
        ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ];
    return {
      presets,
      plugins
    }
  }

Это мой webpackconfig.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
       // exclude: /node_modules/,
       exclude : [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/
      ],
        use: {
          loader: 'babel-loader',
          options:{
            sourceType: "unambiguous"
          }
        },
      },
    ],
  },
  devtool:"cheap-source-map",
  resolve: {
    extensions: ['*', '.js'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
};

Я также пробовал много вариантов, это мой текущий, с entry:"usage" и не исключая node_modules.

Это из моего package.json: 

 "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "eslint": "^6.8.0",
    "eslint-config-google": "^0.14.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "dotenv-webpack": "^1.7.0"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "ismobilejs": "^1.0.3",
    "localforage": "1.7.3",
    "postmate": "^1.5.2",
    "uuid": "^7.0.3"
  }

Кажется, ошибка возникает при первом вызове библиотеки Postmate , т.е. new Postmate({...}) (у меня есть console.log как раз перед) До этого звонка у меня есть один номер на localforage, и обещание успешно выполнено.

Ответы [ 2 ]

2 голосов
/ 09 апреля 2020

Использование useBuiltIns: "usage"

Вам необходимо обычно импортировать модули, которые вы хотите использовать ( ig Postmate ), внутри файла ввода кода; нет полифилов; каждый использованный полифилл будет обработан соответственно @babel/preset-env. Кроме того, версия corejs в @babel/preset-env должна содержать одно число (, т. Е. 3 или 2).

Содержимое babel.config.js: 

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        corejs : {
          version : "3",
          proposals : true
        },
        useBuiltIns: 'usage',
        targets: {
          browsers: [
            "edge >= 16",
            "safari >= 9",
            "firefox >= 57",
            "ie >= 11",
            "ios >= 9",
            "chrome >= 49"
          ]
        }
      }
    ]
  ];
  const plugins= [
      ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ];
  return {
    presets,
    plugins
  }
}

Содержимое webpackconfig.js: 

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [
          /\bcore-js\b/,
          /\bwebpack\/buildin\b/
        ],
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: path.resolve(__dirname, 'babel.config.js'),
            compact: false,
            cacheDirectory: true,
            sourceMaps: false,
          },
        },
      },
    ],
  },
  devtool: "cheap-source-map",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
}

Содержимое записи JS file src/index.js: 

import Postmate from 'postmate';

// Postmate and rest of the code
...

Будет сгенерировано: 

dist/shim.js      177K
dist/shim.js.map  140K

Вы можете протестировать распространенный в Интернете пример, работающий с использованием useBuiltIns: "usage" в IE 11 здесь: https://zikro.gr/dbg/so/61044894/usage/. ( У дочернего iFrame есть кнопка, которая меняет цвет фона родительского окна на случайный цвет )

Вы можете найти репозиторий со всем проектом и пример использования ветки в этом хранилище / ветке Github: https://github.com/clytras/ie11-postmate/tree/usage

Использование useBuiltIns: "entry"

В соответствии с этой проблемой обсуждение "использование символа вызывает исключение в IE11 ", вам необходимо:

  1. Исключить @babel-runtime и core-js в правиле для .js файлов.
  2. Иметь corejs: "3" и useBuiltIns: 'entry' для @babel/preset-env предустановка внутри babel.config.js файла.
  3. Должен быть core-js/stable и postmate импорт в исходный файл JS файла.

Содержимое bavel.config.js: 

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        corejs:"3",
        useBuiltIns: 'entry',
        targets: {
          browsers: [
            "edge >= 16",
            "safari >= 9",
            "firefox >= 57",
            "ie >= 11",
            "ios >= 9",
            "chrome >= 49"
          ]
        }
      }
    ]
  ];
  const plugins= [
      ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ];
  return {
    presets,
    plugins
  }
}

Содержимое webpackconfig.js: 

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: path.resolve(__dirname, 'babel.config.js'),
            compact: false,
            cacheDirectory: true,
            sourceMaps: false,
          },
        },
      },
    ],
  },
  devtool:"cheap-source-map",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'shim.js',
  }
}

Содержимое записи JS file src/index.js: 

import 'core-js/stable';
window.Postmate = require('postmate/build/postmate.min.js');

// Postmate and rest of the code
...

Будет сгенерировано: 

dist/shim.js      641K
dist/shim.js.map  459K

Вы можете проверить в IE 11 здесь: https://zikro.gr/dbg/so/61044894/.

0 голосов
/ 05 апреля 2020

Вероятно, вам не хватает некоторых импортов, я бы посоветовал посмотреть, что act-app-polyfills импортирует из-под колпачка для поддержки IE11 - сообщение об ошибке относится к Symbol. core-js>=3 больше не импортирует все, что нужно IE11 с core-js/stable. На момент написания этой статьи этого может быть достаточно: 

// If  you need `fetch` or `Object.assign`
npm install whatwg-fetch object-assign

// Make sure we're in a Browser-like environment before importing polyfills
// This prevents `fetch()` from being imported in a Node test environment
if (typeof window !== 'undefined') {
  // fetch() polyfill for making API calls.
  require('whatwg-fetch');
}

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

/// This may rid you of your error message

// Support for...of (a commonly used syntax feature that requires Symbols)
require('core-js/features/symbol');
// Support iterable spread (...Set, ...Map)
require('core-js/features/array/from');

Надеюсь, это поможет

...