#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, ваш ответ правильный. Это не работало, потому что это была проблема с кэшированием, обновления было недостаточно, мне пришлось зайти в браузер и очистить кеш.