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

【问题标题】：How to get Javascript's IMPORT EXPORT working. Do I need transpiler?如何让 Javascript 的 IMPORT EXPORT 工作。我需要转译器吗？
【发布时间】：2019-11-19 09:21:53
【问题描述】：

我对此感到很困惑。我想做的只是将我的 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。不知道是不是这个问题。

谢谢。

约翰

【问题讨论】：

不确定它是否仍然存在，但脚本标签过去需要 type="module" 属性用于模块脚本。
stackoverflow.com/questions/37624819/…的可能重复

标签： javascript knockout.js ecmascript-2017

【解决方案1】：

（在 jsfiddle 之类的东西中没有真正的好方法来展示如何做到这一点，所以我为内联代码道歉）

这是您尝试做的一个非常基本的示例（减去淘汰赛部分）

这里的一个关键是您需要告诉浏览器您的脚本是一个模块 (type="module")（请参阅 ES6 in the browser: Uncaught SyntaxError: Unexpected token import 了解在未将 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};

【讨论】：

【解决方案2】：

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

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

一个简单的 webpack 配置示例。

var path = require('path');

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

【讨论】：

Webpack 用于捆绑/打包您的代码。他只是想让 ES6 模块正常工作。你不需要 webpack。
我明白了，但我认为他正在做一个项目并使用 KnockoutJS 最好使用 webpack 可能
Webpack 无疑是一种极大的奢侈，但如果你一开始不知道如何使用模块，那么一次全部学习就太过分了。部分问题是 OP 没有完全理解导入/导出，这是学习模块如何工作的关键。
成功了！！十分感谢大家。是的，我们的项目协调员告诉我要跟上 WebPack 的速度，所以你的 cmets 使用它是正确的。真的，你们很棒。感谢您对我们新人的耐心。