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

问题描述 投票:0回答:1

是否可以将模块捆绑到单个缩小的.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,我知道有些捆绑器会摇晃树以仅部署最小值,但是在我的情况下,必须包含所有内容,因为我们不知道什么浏览器将对其进行处理(例如,在控制台中对其进行播放)

感谢您的帮助!

javascript ecmascript-6 build module bundle
1个回答
0
投票

是否有可能将模块捆绑到单个缩小的.js中,以包含在单个标签中?

是,这是像WebpackRollup.js这样的捆绑器要做的事情之一。

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

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


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

热门问题
推荐问题
最新问题