Экспорт глобальной функции с помощью веб-пакета

Question

Я пытаюсь написать изоморфный модуль. Javascript сервера будет работать внутри JINT. Я создал пакет веб-пакетов специально для сборки серверной версии модуля. Я хочу показать одну функцию, которую я могу заставить вызывать JINT. Я использую функцию scriptEngine.Invoke из JINT, однако она ищет функцию для глобального объекта. Я не знаю, как получить функцию на глобальный объект. Я попытался использовать expose-loader, но это, кажется, экспортирует весь модуль, и я не могу заставить его просто выставить одну функцию.

Вот моя точка входа:

require("expose?FormValidator!./formValidator.js");

Вот мой formValidator.js:

export default function validate () {
    return 'HelloWorld';
}

Когда я загружаю полученный пакет и проверяю глобальный FormValidator, это объект с функцией проверки. Есть ли способ, которым я могу получить функцию проверки, которая будет напрямую назначена FormValidator?

Answer 1

Я в той же ситуации, что и вы. Вот мой код:

webpack.config.js:

module.exports = {
    entry: './src/method/eTrack/index.js',
    output: {
        filename: 'eTrack.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'eTrack',
        libraryTarget: 'umd'
    },
};

./src/method/eTrack/index.js:

import create from './create';
import getAll from './getAll';
import getByName from './getByName';
import remove from './remove';

export function eTrack () {

}
eTrack.trackers = [];
eTrack.create = create;
eTrack.getAll = getAll;
eTrack.getByName = getByName;
eTrack.remove = remove;

Ну, после в комплекте через веб-пакет, я могу получить доступ eTrack в окне, но это оказывается объектом. Это означает, что я не могу позвонить eTrack() напрямую, но должен позвонить как eTrack.eTrack(),

И я попробовал решение @Ambroos, измените ./src/method/eTrack/index.js на ：

module.exports = function eTrack () {

}

На этот раз после того, как в комплекте, я не могу получить доступ eTrack в окне браузера eTrack объект пропал и он выбрасывает eTrack is undefined ошибка в консоли.

Затем я нашел статью, которая очень помогает: http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

И поменять мой index.js в:

function eTrack () {

}
module.exports = eTrack;

Тогда все работает как положено! Я могу позвонить eTrack() прямо в <script> tag. Хотя я не знаю разницы между ответом @Ambroos и этим решением.

Answer 2

Вместо использования синтаксиса экспорта ES6 попробуйте просто module.exports = function validate() {}, который должен работать.

Вавилон, вероятно, почему-то не работает так, как вы ожидаете их тоже сейчас. Экспорт с Babel делает следующее:

export default function testDefault() {}
export function testNamed() {}

Превращается в

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = testDefault;
exports.testNamed = testNamed;
function testDefault() {}
function testNamed() {}

В этом случае ваш экспортируемый объект будет иметь default() и testNamed().

Обновление для веб-пакета 2: в веб-пакете 2 нельзя смешивать импорт ES6 и экспорт CommonJS. Если вы используете module.exports, вы также должны использовать require, а если вы используете import, вы должны использовать экспорт в паре с ним.

В веб-пакете 2 нельзя использовать экспорт по умолчанию для ES6, чтобы сделать глобальный доступным. Наиболее используемое решение сейчас - создать небольшую точку входа, которая просто делает следующее:

// assuming myLibraryEntry is the default export in the required file.
const myLibraryEntry = require('./real-entry-point-in-es6.js').default;

// This makes myLibraryEntry available as whatever you set libraryName to in your config.
module.exports = myLibraryEntry;

Answer 3

Вы также можете просто зарегистрировать свою функцию в объекте окна при выполнении модуля. В файл index.js просто добавьте такой код:

      if (!window.myFunction) {
    window.myFunction = () => { alert('Hello My Function'); }
}

Таким образом, нет необходимости в дополнительной настройке веб-пакета.