将 ecmascript 6 个模块捆绑到一个文件中？
是否可以将模块捆绑到单个缩小的.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，从我读到的内容来看，我知道一些捆绑器会为了只部署最小值而进行树摇动，但在我的情况下，所有内容都必须包括在内，因为我们不知道浏览器会用它做什么（例如，在控制台中使用它）
牧羊人nacy1回答
-
弑天下
是否可以将模块捆绑到单个缩小的.js以包含在单个标签中？是的，这是像Webpack和Rollup这样的捆绑器.js做的事情之一。我知道一些捆绑器为了只部署最小值而进行树摇动，但在我的情况下，所有内容都必须包括在内，因为我们不知道浏览器会用它做什么（例如，在控制台中使用它）你可以关闭树摇晃。它可能不明显，但例如，这个答案显示了如何在Webpack 4中关闭它。使用Rollup更直接：有一个选项。也就是说，如果从控制台玩东西是一个预期的用例，模块可能不是最好的选择，因为它们封装了它们的内容，而不是将所有内容转储到全局范围内。
随时随地看视频慕课网APP
相关分类
JavaScript