Использование SystemJS/jspm для загрузки асинхронных модулей es5 в производство

Я хочу иметь возможность асинхронно загружать зависимости с помощью System.import(), но без необходимости транспилировать ES6 в ES5 во время рабочего цикла. Я хочу, чтобы эти модули были преобразованы в отдельные модули ES5, которые извлекаются только при необходимости. Я не хочу, чтобы они были частью основного пакета.

Рабочий процесс разработки

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

У меня есть рабочий процесс, в котором я использую jspm bundle и jspm unbundle для переключения между конфигурациями разработки и производства. В моей среде разработки я включаю следующие скрипты:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
    System.import('src/main');
</script>

Производственный рабочий процесс

В продакшене я использую jspm bundle --inject для внедрения опции bundles в System.config. Это эффективно загружает только необходимые файлы:

system.js
config.js
main.bundle.js

Когда я пытаюсь загрузить модуль асинхронно с System.import() во время производства, он загружается нормально, что означает, что транспиляция происходит в браузере во время производства.

Вопросы

  1. Я могу легко встроить каждый из своих модулей в AMD, но как я могу асинхронно и отдельно получать их с помощью System.import()?

  2. Я также хочу убедиться, что у браузера как можно меньше накладных расходов, что означает отсутствие каких-либо скриптов, выполняющих транспиляцию. Есть ли способ включить system.js, у которого нет возможностей транспиляции?


javascript systemjs jspm
person Himmel    schedule 15.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ответ 1

System.import() используется для загрузки модулей. Модули — это важные файлы .js, которые экспортируют что-то вроде функции, объекта или класса.

Если вы организуете свой код в отдельные файлы, вы можете загрузить их либо в заголовок другого файла, используя ..

import * as YM from 'YourModuleFile';

это сделало бы YM доступным во всем файле.

Или, если вы хотите, чтобы YM загружался по нажатию кнопки вместо этого..

element.onclick = function() {
    System.import('YourModuleFile').then(function(YM) {
        // YM accessible here
    })
}

Таким образом, важно правильно организовать код внутри файлов/модулей.

Затем вы можете использовать средство запуска задач npm, например gulp, для сжатия файлов и т. д.

Конечно, вам нужно будет ввести некоторые сопоставления в файле systemjs.config.js, например ..

'YourModuleFile': '/path/to/your/module/file.js'

Чтобы SystemJS мог его найти.

Ответ 2

У JSPM есть возможности tranpile, я не уверен, что у SystemJS есть.

Убедитесь, что JSPM (или выбранный вами инструмент) транспилирует ваши файлы. Затем укажите SystemJS на транспилированные файлы.

person danday74    schedule 29.03.2017