Question

是否可以将模块捆绑到单个缩小的.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 from what I read，我知道有些捆绑器会摇晃树以仅部署最小的捆绑器，但在我的情况下，必须包括所有内容，因为我们不这样做不知道浏览器将如何处理它（例如，在控制台中使用它）

感谢您的帮助！

Answer 1

是否可以将模块捆绑到单个缩小的.js中，以包含在单个标签中？

是的，这是像Webpack和Rollup.js这样的捆绑器要做的事情之一。

我知道有些捆绑程序会摇晃树以仅部署最低限度的文件，但是在我的情况下，必须包含所有内容，因为我们不知道浏览器将如何处理（例如，在其中使用它控制台）

您可以关闭摇树。它可能不是很明显，但是例如this answer展示了如何在Webpack 4中将其关闭。使用Rollup：There's an option更直接。

也就是说，如果在控制台上玩游戏是一个预期的用例，则模块可能不是最佳选择，因为它们封装了内容而不是将所有内容都转储到全局范围中。

将ecmascript 6模块捆绑到一个文件中？

1 个答案: