Как встроить Rollup / Babel polyfills для IE11 - PullRequest
Новая
       74

Как встроить Rollup / Babel polyfills для IE11

0 голосов
/ 05 ноября 2019

Я некоторое время работал над проектом PHP, и клиент запросил поддержку IE11 в последнюю минуту. Проблемы с HTML / CSS, с которыми я могу справиться, но мой javascript был написан с использованием современного синтаксиса.

Поэтому я устанавливаю узел, беру свой javascript, запускаю его через Rollup & Babel при первой необходимости и кеширую результат для будущих запросов.

Теперь в выводе отсутствуют функции стрелок, которые раньше вызывали у меня головную боль, но у меня возникла большая проблема: полифиллы - это операторы импорта , а IE11 не поддерживает операторы импорта .

Я чувствую, что мне нужно подчеркнуть, что я не использую сервер узлов - это сервер PHP, я просто использую узел на серверной стороне для накопительного пакета и babel. Если что-то делает узел, чтобы сделать эту работу, я не знаком с этим.

Вот мой rollup.config.js: 

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import minify from 'rollup-plugin-babel-minify';

export default {
  input: '_dud_input.js', // These are set in the exec() call
  output: {
    file: '_dud_output.js', // These are set in the exec() call
    format: 'iife',
    strict : false
  },
  plugins: [
    resolve({
      browser: true
    }),
    commonjs({
      sourceMap: false
    }),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    }),
    minify({
      "comments": false
    })
  ]
};

А вот babel.config.js:

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

Для хихиканья, вот скрипт оболочки, который я вызываю для запуска процесса: 

#!/bin/bash

set -e

# Expected argument values:
# $1 - Path of the root directory
# $2 - Path of the node binary
# $3 - Path of the rollup binary
# $4 - Source file path
# $5 - Destination file path

if [ $# -ne 5 ]
  then
    exit 99
fi

ROOT_DIR=$1
NODE_BIN=$2
ROLLUP_BIN=$3
SRC_PATH=$4
DEST_PATH=$5

cd ${ROOT_DIR}

${NODE_BIN} ${ROLLUP_BIN} -c ${ROOT_DIR}/rollup.config.js -i ${SRC_PATH} -o ${DEST_PATH}

И он связан так: 

<script defer="" type="text/javascript" src="http://example.com/site-asset/flatfile.js"></script>

С этими настройкамиМой файл flatfile.js выводит в верхней части следующее: 

import"core-js/modules/es.symbol";
import"core-js/modules/es.symbol.description";
import"core-js/modules/es.symbol.iterator";
import"core-js/modules/es.array.concat";
import"core-js/modules/es.array.filter";
import"core-js/modules/es.array.find";
import"core-js/modules/es.array.for-each";
// ...etc...

При этой настройке консоль IE11 говорит, что в первой строке каждого файла с операторами импорта есть Syntax error.

Изменение useBuiltIns с usage на entry (что, как я понимаю, означает, что я ожидаю, что в другом месте будет файл ввода, который добавляет полифиллы), и включение https://polyfill.io/v3/ ничего не делает (я получаю ошибкина Number.parseFloat() звонки).

В отчаянии я даже добавил к своему приложению маршрут "core-js", который пытается обработать соответствующий файл core-js - но нет никаких признаков того, что IE11 дажепытаясь следовать инструкциям require.

Осматривая intэ-э-э, кажется, что это не проблема для кого-то еще - IE11, очевидно, работает для всех остальных?

Может быть, это потому, что я не использую сервер узлов, а сервер PHP / Apache?

Я просто хочу, чтобы Babel включил полифилы core-js в мои файлы, а не как операторы require, которые IE11 не знает, как анализировать.

1 Ответ

1 голос
/ 05 ноября 2019

Мне пришлось отключить плагин babel-minify, но кроме этого, копирование вашей конфигурации, кажется, работает нормально, и я получаю один связанный JavaScript-файл без операторов импорта.

Файлы воспроизводятся ниже, но полное тестовое репо доступно в https://github.com/akx/so58712204 - yarn; yarn build и посмотрите в dist/ ...

babel.config.js 

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

. json 

{
  "scripts": {
    "build": "rollup -c ./rollup.config.js -i ./src/entry.js -o ./dist/output.js"
  },
  "dependencies": {
    "@babel/core": "^7.7.0",
    "@babel/preset-env": "^7.7.0",
    "core-js": "^3.3.6",
    "rollup": "^1.26.3",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-babel-minify": "^9.1.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0"
  }
}

rollup.config.js 

import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";

export default {
  input: "_dud_input.js", // These are set in the exec() call
  output: {
    file: "_dud_output.js", // These are set in the exec() call
    format: "iife",
    strict: false
  },
  plugins: [
    resolve({
      browser: true
    }),
    commonjs({
      sourceMap: false
    }),
    babel({
      exclude: "node_modules/**" // only transpile our source code
    })
  ]
};

src / entry.js 

import { magicNumber } from "./magic";
console.log(new Set([Number.parseFloat(magicNumber)]));

src / magic.js 

const magicNumber = "8.82";
export { magicNumber };
...