Question

我最近使用webpack，babel以及所有这些家庭将我的库代码更改为es6。

所以我的作品最终是单个文件..与之前相比，我有很多文件是按需求动态加载的。

我的问题是我正在使用另一个动态加载其某些类的库，为了自定义它们，我需要为自定义对象/类提供URL。起初这不是问题，因为我有很多文件，但现在我的代码被捆绑到一个文件中。

有没有办法让js / es6 / ...给出一些内容/字符串并为它创建一个假网址，这样其他图书馆就会加载＆＃39;它？

例如：

我的课程

file ../ myLib / CustomLayer2D.js

Class CustomLayer2D {
...
}

file ../ myLib / CustomLayer3D.js

Class CustomLayer3D {
...
}

file ../ myLib / CustomLayer.js 这是使用其他库

Accessor.createSubClass([layer], {

     viewModulePaths:{
        "2d": "need to provide here a url to 2d layer file",
        "3d": "need to provide here a url to 3d layer file"
     }
});

file ../ myLib / CustomLayer.js

Class CustomLayer2D {
...
}

Class CustomLayer3D {
...
}

Accessor.createSubClass([], {

     viewModulePaths:{
        "2d": "need to provide here a path to 2d layer",
        "3d": "need to provide here a path to 3d layer"
     }
});

我更喜欢找到一种方法，而不是从捆绑中排除我的自定义类（我的最后一招）。

Answer 1

Webpack可以将所有资产捆绑在一个js文件中，但您仍然可以将单独的js文件与Webpack或Webpack-dev-server一起使用。

您可以使用webpack-dev-server's config或只是将../myLib/CustomLayer3D.js放在webpack包文件旁边，以原始方式动态加载2D或3D.js文件，而不是在CustomLayer中输入/导入它们。 JS。

除了你的另一个图书馆之外？也许它还有其他一些动态加载类的方法。

Answer 2

感谢@Kaiido的评论和一些更多的研究，我已经找到了完整的解决方案。

在我们的webpack.config.js中，我们正在添加我们的文件以运行raw-loader - 因此，它不会捆绑实际代码，而是将文件捆绑为文本文件。

在我们的代码中，我们只需导入我们的文件并将其放入<<The Code>>

URL.createObjectURL(new Blob([<<The Code>>], {type: 'text/plain'}));

看起来像这样

<强> webpack.config.js 在rules属性

下

{
    test: /myLib\\CustomLayer2D.js|myLib\\CustomLayer3D.js/,
    loader: 'raw-loader',
}

档案myLib / CustomLayer.js

import layer2DCode from './myLib/CustomLayer2D.js'
import layer3DCode from './myLib/CustomLayer3D.js'

Accessor.createSubClass([], {

     viewModulePaths:{
        "2d": URL.createObjectURL(new Blob([layer2DCode], {type: 'text/plain'})),
        "3d": URL.createObjectURL(new Blob([layer3DCode], {type: 'text/plain'}))
     }
});

创建文件内容的虚拟/虚假URL

2 个答案: