如何让Javascript的IMPORT EXPORT正常工作。我需要转换器吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

我对此很困惑。我想要做的就是将我的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中

用户service.js

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

export {user};

我不明白我错过了什么。

我是否需要使用另一个JS库来使这个简单的例子工作?我很失落......大声笑,请帮忙!

哦,你可以看到我正在使用KnockoutJS。不确定这是不是问题。

谢谢。

约翰

提问于
用户回答回答于

(有一种很好的方法来展示如何在像jsfiddle这样的东西中执行此操作,所以我为内联代码道歉)

这是你要做的事情的一个非常基本的例子(减去淘汰部分)

这里的一个关键是,你需要告诉你的脚本是一个模块的浏览器(type="module")(见ES6在浏览器中:未捕获的SyntaxError:意外的令牌进口的一些其他问题,您可以运行时不能定义为typemodule

你的问题的另一个关键修复是你试图以.sayHello()错误的方式调用。

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

您是exported用户所以不需要这样做.useruser导出的对象没有属性。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};
用户回答回答于

你需要像webpack这样的模块捆绑器来处理这个问题

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

简单webpack配置的示例。

var path = require('path');

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

扫码关注云+社区

领取腾讯云代金券