Объединение модулей ecmascript 6 в один файл? - PullRequest
Новая
       97

Объединение модулей ecmascript 6 в один файл?

0 голосов
/ 26 мая 2020

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

Вот чрезмерно упрощенный пример поддеревьев / пространств имен, которые не обязательно связаны друг с другом, но в конечном итоге сгруппированы вместе в один объект: 

// fruits/base.js
    export default class Fruit_base {};

// fruits/apple.js
    import Fruit_base from "./base.js";
    export default class Apple extends Fruit_base {};

// fruits/orange.js
    import Fruit_base from "./base.js";
    export default class Orange extends Fruit_base {};

// fruits/allOfThem.js
    import Fruit_base from "./base.js";
    import Apple from "./apple.js";
    import Orange from "./orange.js";
    const Fruits = {Fruit_base, Apple, Orange};
    export default Fruits;



// animals/base.js
    export default class Animal_base {};

// animals/cat.js
    import Animal_base from "./base.js";
    export default class Cat extends Animal_base {};

// animals/dog.js
    import Animal_base from "./base.js";
    export default class Dog extends Animal_base {};

// animals/allOfThem.js
    import Animal_base from "./base.js";
    import Cat from "./cat.js";
    import Dog from "./dog.js";
    const Animals = {Animal_base, Cat, Dog};
    export default Animals;


// main.js
    import Fruits from "./fruits/allOfThem.js";
    import Animals from "./animals/allOfThem.js";
    const someVar = 1;
    const someOtherVar = 2;
    function someFunc() {}
    const Things = {Fruits, Animals, someVar, someOtherVar, someFunc};
    export default Things;

А затем можно делать следующее: 

<html>
    <body>
        <script type="module">
            import Things from "/assets/js/things.min.js";

            const apple = new Things.Fruits.Apple();
            const dog = new Things.Animals.Dog();
            Things.someFunc();
        </script>
    </body>
</html>

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

Кроме того, если это было на стороне сервера js, из того, что я читал , я знаю, что некоторые сборщики встряхивают дерево, чтобы развернуть только минимум, но в моем случае, все должно быть включено, так как мы не знаем, что браузер будет с ним делать (например, играть с ним в консоли)

спасибо за вашу помощь!

1 Ответ

0 голосов
/ 26 мая 2020

возможно ли объединить модули в один минифицированный. js включить в один тег?

Да, это одна из вещей, связанных с пакетами, например Webpack и Rollup. js do.

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

Вы можете отключить встряхивание дерева. Это может быть неочевидно, но, например, этот ответ показывает, как отключить его в Webpack 4. С Rollup все проще: Там есть опция .

Тем не менее, если игра с консолью является ожидаемым вариантом использования, модули могут быть не лучшим выбором, поскольку они инкапсулируют свое содержимое, а не сбрасывают все в глобальную область.

...