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

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，我知道一些打包器会进行 tree shaking 以仅部署最少的，但就我而言，所有内容都必须包括在内，因为我们不知道浏览器将如何处理它（例如，在控制台中使用它）

感谢您的帮助！

Answer 1

is it possible to bundle modules to a single minified .js to include in a single tag ?

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

I know some bundlers do tree shaking in order to only deploy the minimum, but in my case, everything has to be included, as we don't know what the browser will do with it (for example, play with it in the console)

您可以关闭 tree-shaking。它可以不明显，但例如 shows how to turn it off in Webpack 4. It's more straight-forward with Rollup: There's an option.

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

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

Bundling ecmascript 6 modules into a single file?

javascript

bundle

module

build

ecmascript-6