Grunt + Browserify + Babelify требуют / импортируют без учета одного именованного экспорта, вместо этого импортирует весь модуль - PullRequest
Новая
       110

Grunt + Browserify + Babelify требуют / импортируют без учета одного именованного экспорта, вместо этого импортирует весь модуль

0 голосов
/ 18 сентября 2018

У меня есть 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, которую мне не удается реализовать.

Вероятно, мне не хватает основной информации или что-то не так на уровне ядра.

Я просто не могу понять или исправить причину, когда я пытаюсь импортировать один файл с именеммодуль, который в итоге импортирует весь скрипт.

Я что-то упустил?

...