如何使Javascript的IMPORT EXPORT工作.我需要翻译机吗? [英] How to get Javascript's IMPORT EXPORT working. Do I need transpiler?

查看:68
本文介绍了如何使Javascript的IMPORT EXPORT工作.我需要翻译机吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我已经Google搜索过,请阅读教程,但它仍然对我不起作用.

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

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中

user-service.js

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

export {user};

我看不到我想念的东西.

我是否需要使用另一个JS库来使此简单示例正常工作?我很迷路...大声笑,请帮忙!

哦,您可以看到我正在使用KnockoutJS.不确定是否是问题所在.

谢谢.

约翰

解决方案

(实际上并没有很好的方法来展示如何在jsfiddle之类的方法中做到这一点,因此我为内联代码表示歉意)

这是您要尝试做的非常基本的示例(减去敲除部分)

这里的一个关键是您需要告诉浏览器您的脚本是一个模块(type="module")(请参阅

查看模型

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

user.sayHello();

用户服务

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

export {user};

I am so confused about this. All I want to do is simply break up my javascript into modules, and include them in certain pages. Some pages may need my user-module.js , some pages may not.

I have Googled, read the tutorials, and it's still not working for me.

Here is a simple test case:

1. Include my script from my html

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

Now, inside there...

2. TRY to include another module/js file


// 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());

Now, inside my user-service.js

user-service.js

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

export {user};

I don't see what I am missing.

Do I need to use another JS library to get this simple example working? I am so lost...lol , please help!

Oh, as you can see I am using KnockoutJS. Not sure if that is the problem.

Thank you.

John

解决方案

(There isn't really a good way to show how to do this in something like jsfiddle, so I appologize for the inline code)

Here is a very basic example of what you're trying to do (minus the knockout part)

One key here is that you need to tell the browser that your script is a module (type="module") (see ES6 in the browser: Uncaught SyntaxError: Unexpected token import for some other issues you can run into when not defining type as module)

The other key fix to your problem is that you're trying to invoke .sayHello() in the wrong way.

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

You exported user so you don't need to do .user, there is no property of user on your exported object. userService is already user

Working Example:

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>

View Model

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

user.sayHello();

User Service

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

export {user};

这篇关于如何使Javascript的IMPORT EXPORT工作.我需要翻译机吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆