是否可以將模塊捆綁到單個(gè)縮小的.js以包含在單個(gè)標(biāo)簽中？我知道服務(wù)器端js包是一個(gè)不同的故事，但在我的情況下，它實(shí)際上是由瀏覽器加載的，我不想有多個(gè)http請(qǐng)求。下面是一個(gè)過(guò)度簡(jiǎn)化的示例，子樹/命名空間不一定相關(guān)，但最終在單個(gè)對(duì)象中分組在一起：// 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;然后能夠執(zhí)行以下操作：<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>讓我感到困惑的是，在導(dǎo)入/導(dǎo)出模塊時(shí)，我們可以使用別名，所以我不確定任何工具如何找出工作所需的適當(dāng)名稱。另外，如果是服務(wù)器端的js，從我讀到的內(nèi)容來(lái)看，我知道一些捆綁器會(huì)為了只部署最小值而進(jìn)行樹搖動(dòng)，但在我的情況下，所有內(nèi)容都必須包括在內(nèi)，因?yàn)槲覀儾恢罏g覽器會(huì)用它做什么（例如，在控制臺(tái)中使用它）
將 ecmascript 6 個(gè)模塊捆綁到一個(gè)文件中？
牧羊人nacy
2022-09-02 16:26:30
