Как использовать модули ES6 при создании плагина jQuery? - PullRequest
Новая
       16

Как использовать модули ES6 при создании плагина jQuery?

0 голосов
/ 10 февраля 2019

Я создаю плагин jQuery для построения построителя форм.Код будет очень длинным.Я не хочу хранить все в одном файле.Чтобы добиться этого, я пытаюсь разбить все на модули ES6, но JS выдает синтаксическую ошибку.

Uncaught SyntaxError: Неожиданный идентификатор

Uncaught TypeError: $ (...).formBuilder не является функцией

Вот мой код:

index.html 

<!DOCTYPE html>
<html>
<head>
  <title>Form Builder</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>

  <!-- <script src="functions.js"></script> -->
  <script src="index.js"></script>
</head>
<body>
    <div id="form-builder"></div>
</body>
</html>
<script type="text/javascript">
    $("#form-builder").formBuilder();
</script>

index.js 

import formBuilder from './functions.js'

(function($){
    $.fn.formBuilder = function(){
        formBuilder()
    }
}(jQuery))

functions.js 

export default function formBuilder(){
    $.get('template.mst', function(template) {
            let rendered = Mustache.render(template, fieldsData);
            $('#form-builder').html(rendered);
    });
}

1 Ответ

0 голосов
/ 10 февраля 2019

Мне пришлось внести два изменения, чтобы запустить ваш код (в Chrome / Firefox):

Сначала, с MDN

Оператор импортане может использоваться во встроенных сценариях, если такой сценарий не имеет type = "module".

Это немного вводит в заблуждение: встроенный сценарий звучит так, как будто он не будет содержать сценарий src=..Но на практике это не работает без него. 

<script type="module" src="index.js"></script>

Во-вторых, скрипты модуля загружаются с отложенной загрузкой, что означает, что ваш окончательный тег script будет выполнен до фактической загрузки index.js./ разобран.Вы можете изменить это с помощью обратного вызова jQuery ready. 

<script>
  $(() => {
    $("#form-builder").formBuilder();
  });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...