Блог

Я пытаюсь объединить два модуля JavaScript, чтобы результирующий код работал в IE11. Для этого я настроил проект yarn / npm, который используетrollup.js для объединения и Babel для переноса. Все работает нормально, пока я не добавлю зависимость (не от разработчика) core-js .

Вот подробности:

1 Настройка перед добавлением core-js

Файлы JS

• src/main.js
• src/utils.js

Конфигурационные файлы

package.json

 {
  "name": "rollup_for_ie",
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "@rollup/plugin-babel": "^5.2.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "rollup": "^2.24.0"
  },
}
  

rollup.config.js

 import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
    output: {
        file: 'dist/main.js',
        format: 'iife'
    },
  plugins: [
    resolve({
      browser: true
    }),
    babel({
        exclude: "node_modules/**", // only transpile our source code
        babelHelpers: 'bundled'
    })
  ]
};
  

babel.config.js

 module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: "> 0.5%, ie >= 11"
        },
        modules: false,
        spec: true,
        useBuiltIns: "usage",
        forceAllTransforms: true,
        corejs: 3
      }
    ]
  ],
};
  

При запуске rollup -c я получаю предупреждения о неразрешенных зависимостях, но создается объединенный файл dist/main.js с (используемым) материалом из каталога src. Результирующий файл работает даже в современных браузерах, таких как Chrome. Пока все хорошо.

Проблемы после добавления core-js

Однако связанный файл еще не готов для IE11: в IE я получаю ошибки типа Объект не поддерживает свойство или метод ‘getOwnPropertySymbols’. Итак, необходимо добавить полизаполнения из core-js.

Для этого я устанавливаю core-js в качестве зависимости от продукта. Теперь rollup -c не выдает мне предупреждений, но результирующий dist/main.js начинается как

 (function (exports) {
  'use strict';

  var $ = require('../internals/export');
.
.
.
  

который в качестве скрипта не могут выполнить ни Chrome, ни IE! Похоже, что каким-то образом наличие библиотеки core-js отключает rollup bundler.

Как я могу исправить свою настройку, чтобы результирующий dist/main.js скрипт работал как немодульный в Chrome и IE11?

Я думаю, поскольку вы включили опцию, useBuiltIns: "usage" это означает, что она будет добавлять код из corejs в файлы вашего модуля, который написан в cjs стиле. Итак, вам нужно добавить этот плагин @rollup/plugin-commonjs для обратного преобразования в esm , тогда он будет работать:

 import commonjs from '@rollup/plugin-commonjs';

export default {
  // ...
  plugins: [
    // ...
    commonjs(),
  ]    
};