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

Question

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

我用 Google 搜索过，阅读了教程，但它仍然不适合我。

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

1.包括我的 html

中的脚本

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

现在，里面有...

2。尝试包含另一个 module/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());

现在，在我的用户中-service.js

用户-service.js

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

export {user};

我不明白我错过了什么。

我是否需要使用另一个 JS 库才能使这个简单的示例正常运行？我迷路了...大声笑，请帮忙！

哦，如你所见，我正在使用 KnockoutJS。不确定这是否是问题所在。

谢谢。

约翰

Answer 1

你需要像 webpack 这样的模块打包器来处理

将您的主文件作为一个条目，并根据您的导入生成一个 single JavaScript 文件。

一个简单的 webpack 配置示例。

var path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'output.bundle.js'
  }
};

Answer 2

（在 jsfiddle 之类的东西中并没有很好的方法来展示如何做到这一点，所以我对内联代码表示歉意）

这是您要执行的操作的一个非常基本的示例（减去淘汰赛部分）

这里的一个关键是您需要告诉浏览器您的脚本是一个模块 (type="module")（请参阅了解一些您可以运行进入的其他问题将 type 定义为 module)

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

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

您是 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};

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

How to get Javascript's IMPORT EXPORT working. Do I need transpiler?

javascript

knockout.js

ecmascript-2017