Question

您好我是webpack和ES6的新手，试图在html中访问导入的类。我有一个index.js导入的类。

import one from './src/one.js';
import two from './src/two.js';
import three from './src/three.js';

export {
    one,
    two,
    three
}

index.html中的

我正在尝试访问该类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bundle.js"></script>
</head>
<body>
<script>
    let oneObj = new one();
</script>
</body>
</html>

获取错误“一个未定义”。请帮助我如何访问html中的类。

Answer 1

这不是预期的用例，因此需要使用expose-loader进行特殊处理。

模块捆绑器的想法是通过它运行所有JavaScript（除了在某处外面有一些代码）。因此，当您使用StoreController test = new MvcMusicStore.Controllers.StoreController(); ActionResult result = test.Index(); ViewResult p = (ViewResult)result;进行编码时，请使用export {one, two, three}：

lib.js

将webpack配置为使用app.js作为条目文件，最后从import {one} from './lib.js'; let oneObj = new one();中删除内联脚本。

Answer 2

有很多方法可以配置webpack（例如：https://stackoverflow.com/a/34361312/2043830），但我无法使其正常工作。

所以我使用全局窗口对象来存储我想要公开给index.html的东西。

例如，在index.js中你可以这样做：

window.exported = {one, two, three};
//or window.one = one; window.two = two ... etc

然后在你的index.html：

<script>
let oneObj = new window.exported.one();
//or let oneObj = new window.one(); ... etc
</script>

我希望这会有所帮助。

如何访问webpack在html中导入es6类？

2 个答案: