Grunt + Browserify + Babelify требуют / импортируют без учета экспорта с одним именем, вместо этого импортирует весь модуль
У меня есть init.js файл, который выполняет некоторую логику, и HTML Import добавляет либо form.html или же app.html в основной файл. Это позволяет сэкономить время и загружать только те фрагменты кода, которые необходимы в данный момент. Я могу опубликовать код, чтобы проиллюстрировать это при необходимости.
В зависимости от того, какой импорт HTML загружен init.jsЯ загружаю сопутствующий скрипт. Так, например, если form.html загружается, то я также загружаю form.js,
Я использую Browserify + Babelify, чтобы преобразовать мои скрипты из ES6 в ES5 и создать как минимум 3 пакета: init.js, form.js, а также app.js,
Вот мой ток Gruntfile.js где я настраиваю Browserify для использования преобразования Babelify и настраиваю src-dest отображения:
module.exports = function(grunt) {
require("load-grunt-tasks")(grunt);
grunt.initConfig({
browserify: {
init: {
src: 'src/scripts/init.js',
dest: 'dist/scripts/init.js'
},
form: {
src: 'src/scripts/form.js',
dest: 'dist/scripts/form.js'
},
options: {
transform: [
['babelify', {
"global": true,
presets: [
["es2015"]
]
}]
],
browserifyOptions: {
debug: true,
sourceType: 'unambiguous'
}
}
}
});
grunt.registerTask('default', ['browserify']);
}
Мой скрипт инициализации использует ES6 Импорт / Экспорт и экспорт userData быть использованным в form.js:
'use strict';
export let userData = null;
(function() {
// do some stuff and assign value to userData
})();
когда form.html импортируется, form.js грузы и импорт userData от init.js:
// form.js
import {userData} from './init';
Проблема в том, что вместо импорта просто userData, form.js импортирует весь init.js импортируется и связывается, поэтому я случайно импортирую весь скрипт, когда мне нужна только одна именованная переменная.
Я пытался переключить global: true опция в опциях задачи gruntfile и экспериментировала с различным синтаксисом импорта / экспорта.
Для точности я также использую некоторые заливки в заголовке моего основного файла index.html, чтобы получить веб-компоненты, HTML-импорт и браузер Browserify, требующий, чтобы код работал в браузерах, помимо Chrome.
//index.html
<head>
<script type="text/javascript" src="src/scripts/helper/webcomponents-loader.js"></script>
<script type="text/javascript" src="src/scripts/helper/html-imports.min.js"></script>
<script src="node_modules/requirejs/require.js"></script>
</head>
<body>
<script src="dist/scripts/init.js"></script>
</body>
Я новичок в использовании Babelify, Browserify и синтаксиса модулей ES6, но, возможно, есть option Конфигурация, которую я не могу реализовать.
Также вероятно, что я упускаю основную информацию или делаю что-то не так на уровне ядра.
Я просто не могу понять или исправить, почему, когда я пытаюсь импортировать единственный названный модуль, я заканчиваю тем, что импортировал весь сценарий.
Я что-то пропустил?