Как заставить работать Javascript IMPORT EXPORT. Нужен ли мне транспортер? - PullRequest
Новая
       34

Как заставить работать Javascript IMPORT EXPORT. Нужен ли мне транспортер?

2 голосов
/ 09 июля 2019

Я так смущен этим. Все, что я хочу сделать, - это просто разбить мой javascript на модули и включить их в определенные страницы. На некоторых страницах может потребоваться мой user-module.js, на некоторых - нет.

У меня есть Googled, я прочитал учебники, и он все еще не работает для меня.

Вот простой тестовый пример:

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. Не уверен, что это проблема.

Спасибо.

John

Ответы [ 2 ]

2 голосов
/ 09 июля 2019

(На самом деле нет хорошего способа показать, как это сделать в jsfiddle, поэтому я прошу прощения за встроенный код)

Вот очень простой пример того, что вы пытаетесь сделать (за исключением нокаутирующей части)

Одним из ключевых моментов здесь является то, что вам нужно сообщить браузеру, что ваш скрипт является модулем (type="module") (см. ES6 в браузере: Uncaught SyntaxError: Неожиданный импорт токена для некоторых других проблем, которые вы можете сталкивайтесь, когда не определяете 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};
0 голосов
/ 09 июля 2019

вам нужен модуль модуля, такой как webpack , например, чтобы позаботиться о том, чтобы

взял ваш основной файл как запись и сгенерировал файл single JavaScript на основе ваших импортов.

Пример простой конфигурации веб-пакета. 

var path = require('path');

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