为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

牧羊人nacy 2022-09-02 16:26:30
是否可以将模块捆绑到单个缩小的.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 回答

?
弑天下

TA贡献1818条经验 获得超8个赞

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

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

我知道一些捆绑器为了只部署最小值而进行树摇动,但在我的情况下,所有内容都必须包括在内,因为我们不知道浏览器会用它做什么(例如,在控制台中使用它)

你可以关闭树摇晃。它可能不明显,但例如,这个答案显示了如何在Webpack 4中关闭它。使用Rollup更直接:有一个选项


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


查看完整回答
反对 回复 2022-09-02
  • 1 回答
  • 0 关注
  • 90 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信