Какой тип инструкции импорта используется для файла, перенесенного с ES6 на ES5?

#javascript #rollupjs

#javascript #rollupjs

Вопрос:

У меня есть index.js файл, который успешно импортировал файл на основе классов с использованием E2015, например:

 import { Handler } from './Library/Transform/Handler.js';
  

Но из-за проблем с совместимостью мне теперь нужно перенести этот файл в ES5, но затем я начал получать эту ошибку в браузере:

 Uncaught SyntaxError: The requested module './Library/Transform/Handler.js' does not provide an export named 'Handler'.
  

Хорошо, достаточно справедливо, но я не уверен, как импортировать это тогда, я пробовал просто сломанный AMD, такой как so: require('./Library/Transform/Handler.js'); , но я получаю точно такую же ошибку.

Я нашел похожие вопросы здесь, но ни один из них не касается конкретно этой проблемы.

Затем я смотрю на фактический перенесенный файл и в конце файла я вижу:

 exports.Handler = Handler;

return exports;

}({}));
  

Итак, это экспорт Handler , и я также пытался:

 var Handler = require('./Library/Transform/Handler.js');
  

и я продолжаю получать ту же ошибку.

Ниже приведен rollup.config.js файл:

 import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import babel from "rollup-plugin-babel";
import { uglify } from "rollup-plugin-uglify";
import banner from "rollup-plugin-banner";

var git = require("git-rev-sync");
var buildVer = process.env.BUILD || 0;
var currRevision = git.long();

export default {
  input: ["./src/Handler.js"],
  output: [
    {
      file: "./dist/Handler.js",
      format: "iife",
      name: "version",
    },
    {
      file: "./dist/Handler.min.js",
      format: "iife",
      name: "version",
      plugins: [uglify()],
    },
  ],
  plugins: [
    banner(
      "t<%= pkg.name %>nt<%= pkg.version %>-"  
      buildVer  
      "nt"  
      currRevision  
      "nt"  
      new Date().toString()   
      "nt<%= pkg.description%>"
    ),
    resolve(),
    commonjs(),
    babel({
     extensions: [".js"],
     exclude: ["node_modules"],
     presets: [
       [
         "@babel/preset-env",
         {
           targets: "ie 11",
           modules: false,
           useBuiltIns: "usage",
           corejs: { version: 3, proposals: true },
         }
       ]
     ]
    })
  ]
};
  

Нетранспилированные Handler.js инструкции импорта файлов имеют некоторые части, которые мы используем, чтобы упростить наш рабочий процесс при разработке этих форм, это выглядит так:

 import { XHandler } from './xy/js-es6/x-es6.js';
import 'promise-polyfill/src/polyfill';
import getHelp from './_Partials/getHelp.11ty.js';
import pwd from './_Partials/pwd.11ty.';
import challengeMe from './_Partials/challengeMe.11ty';
import lockedOut from './_Partials/lockedOut.11ty';
import infoSec from './_Partials/infoSec.11ty';
import lockedOutAgain from './_Partials/lockedOutAgain.11ty';

const debug = false;

export class Handler extends XHandler {
  constructor() {
    super();
    console.log('Handler:Constructor');
  }

  createFormSession(formId, payload) {
    console.log('Handler:createFormSession');

    return new FormSession(formId, payload);
  }
}
  

Комментарии:

1. Вам нужно import * as Handler from ... что вам может понадобиться сделать Handler.Handler , чтобы извлечь его. Это связано с текущей версией чего-то вроде Babel?

2. @tadman, нет, Вавилон тут ни при чем. Я использую rollupJS

3. У меня были проблемы с написанием модулей NPM, которые ведут себя с Node в ESM и браузером с ES6 в соответствии с этими строками.

4. Добавьте свою конфигурацию свертки. Почти наверняка, в чем проблема.

5. @tadman, ваш ответ правильный. Это не работало, потому что это была проблема с кэшированием, обновления было недостаточно, мне пришлось зайти в браузер и очистить кеш.