Как импортировать модули javascript и объединить их в один файл js с накоплением?

У меня есть функции javascript, которые я хочу запускать как на стороне сервера, так и на стороне клиента. На стороне сервера используется node.js и он отлично справляется с импортом.

Однако на стороне клиента мне нужен один тег скрипта со встроенным javascript. Я понял, что для достижения этой цели мне нужен сборщик, который вставляет модули в основной файл сценария. Для этой работы я выбрал свертку.

Вот пример того, что я пробовал. Сделал модуль test.js. это простая функция, возвращающая строку:

// test.js

const test = () => {
    return 'testing'
}

module.exports = test

а вот и главный файл javascript main.js. Файл, в который я хочу вставить функцию test.js:

// main.js

import test from "/test.js"

console.log(test())

Вот как бы я хотел main.js выглядеть после сборки:

// main.js

const test = () => {
    return 'testing'
}

console.log(test())

Я хотел бы просто вставить функцию в файл.

Вместо этого накопительный пакет производит следующее:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../../../../../../../js/test.js')) :
    typeof define === 'function' && define.amd ? define(['../../../../../../../js/test'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.test));
}(this, (function (test) { 'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var test__default = /*#__PURE__*/_interopDefaultLegacy(test);

    console.log(test__default['default']());

})));

Код намного больше, чем раньше, и, что очень важно, модуль не включен в основной файл. Это все еще модуль, но с другим синтаксисом. У Rollup есть несколько вариантов вывода, и все они дают одинаковые результаты.

Вот мой rollup.config.js файл:

// rollup.config.js

export default [
    {
        input: 'src/scripts/main.js',
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'umd'
        }
    }
]

Конечно, это ожидаемый результат для тех, кто понимает, что происходит. Но я не понимаю.

Как мне объединить JavaScript в один файл во время сборки?

есть ли более простое решение, которое я упускаю из виду?

Изменить: использование модуля commonjs и установка формата вывода на iife приводит к следующему:

// main.js

(function (test) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var test__default = /*#__PURE__*/_interopDefaultLegacy(test);

    console.log(test__default['default']());

}(test));

Он другой, но результат все равно не содержит тестовой функции.


javascript node-modules rollupjs jamstack eleventy
person Nathaniel    schedule 07.01.2021    source источник
comment
Поделитесь конфигурацией накопительного пакета.   -  person Justin Taddei    schedule 08.01.2021
comment
Я обновил вопрос, включив в него конфигурацию накопительного пакета. Спасибо.   -  person Nathaniel    schedule 08.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы захотите изменить format на iife (Выражение немедленно вызываемой функции).

Ваш новый rollup.config.js должен выглядеть так:

// rollup.config.js

export default [
    {
        input: 'src/scripts/main.js',
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'iife'
        }
    }
]

Если вам также необходимо использовать экспорт CommonJS (module.exports = ___ вместо ES6 export default ___), вам необходимо установить @ rollup / plugin-commonjs:

$ npm install --save-dev @rollup/plugin-commonjs

И используйте это так:

import commonjs from '@rollup/plugin-commonjs'

export default [
    {
        input: 'src/scripts/main.js',
        plugins: [commonjs()],
        output: {
            name: 'main',
            file: "public/scripts/main.js",
            format: 'iife'
        }
    }
]

Кстати, убедитесь, что ваши пути импорта верны.

Этот:

import test from "/test.js"

Должно быть:

import test from "./test.js"

Дополнительную информацию можно найти в официальных документах.

person Justin Taddei    schedule 07.01.2021
comment
Спасибо за вашу помощь. Я сделал, как вы предложили, и добавил результаты в правку. - person Nathaniel; 08.01.2021
comment
А, это потому, что вы импортируете тест из /test вместо ./test. Rollup обрабатывает модули, которые не может найти, как внешние зависимости. Я обновлю ответ, включив это. - person Justin Taddei; 08.01.2021
comment
Удивительно, но теперь это имеет гораздо больший смысл. Я обновил свой код и могу подтвердить, что он работает. - person Nathaniel; 08.01.2021
comment
Если это отвечает на весь ваш вопрос, не могли бы вы отметить ответ как правильный? Это мне очень помогает :) - person Justin Taddei; 08.01.2021
comment
Сделанный. Спасибо за помощь. - person Nathaniel; 08.01.2021