如何让 Javascript 的 IMPORT EXPORT 工作。我需要编译器吗?

2023-12-20

我对此很困惑。我想做的只是将我的 javascript 分解成模块,并将它们包含在某些页面中。有些页面可能需要我的 user-module.js ,有些页面可能不需要。

我已经谷歌搜索,阅读了教程,但它仍然不适合我。

这是一个简单的测试用例:

1. 从我的 html 中包含我的脚本

<script src="../js/login-view-model.js"></script>

现在,里面...

2.尝试包含另一个模块/js文件


// LoginViewModel


// I NEED MY IMPORT HERE
import { userService } from '../js/viewModels/user-service.js'

var LoginViewModel = function () {

    self = this;

    userService.user.sayHello();

}; // End View Model

ko.applyBindings(new LoginViewModel());

现在,在我的 user-service.js 中

用户服务.js

let user = {
     sayHello: function() { alert("hello") };
}

export {user};

我不明白我错过了什么。

我是否需要使用另一个 JS 库才能使这个简单的示例正常工作?我很迷茫...哈哈,请帮忙!

哦,正如你所看到的,我正在使用 KnockoutJS。不确定这是否是问题所在。

谢谢。

John


(确实没有一个好的方法来展示如何在 jsfiddle 之类的东西中做到这一点,所以我对内联代码表示歉意)

这是您想要做的一个非常基本的示例(减去淘汰赛部分)

这里的一个关键是你需要告诉浏览器你的脚本是一个模块(type="module") (see 浏览器中的 ES6:Uncaught SyntaxError: Unexpected token import https://stackoverflow.com/questions/41722621/es6-in-the-browser-uncaught-syntaxerror-unexpected-token-import/45745913对于未定义时可能遇到的其他一些问题type as module)

问题的另一个关键解决方法是您尝试调用.sayHello()以错误的方式。

userService.user.sayHello(); // wrong
userService.sayHello(); // right

You exported用户,所以你不需要做.user, 不存在以下属性user在您导出的对象上。userService已经user

工作示例:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="loginviewmodel.js" type="module"></script>
</body>
</html>

查看模型

import { user } from "./userservice.js";

user.sayHello();

用户服务

let user = {
    sayHello: function() { alert("hello"); }
};

export {user};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让 Javascript 的 IMPORT EXPORT 工作。我需要编译器吗? 的相关文章

随机推荐