Question

我正在创建一个用于构建表单构建器的jQuery插件。代码将非常冗长。我不想将所有内容保存在一个文件中。为此，我试图将所有内容分解为ES6模块，但是JS抛出了语法错误。

未捕获的SyntaxError：意外的标识符

未捕获的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);
    });
}

Answer 1

我必须进行两项更改才能运行您的代码（在Chrome / Firefox中）：

首先，从https://docs.gradle.org/4.6/release-notes.html#compile/runtime-scope-separation-in-pom-consumption

除非嵌入式脚本具有type =“ module”，否则无法在嵌入式脚本中使用import语句。

这有点误导性：“嵌入式脚本”听起来好像不包含src=脚本...但是在实践中，没有它似乎无法正常工作。

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

第二，模块脚本是延迟加载的，这意味着最后的script标签将在实际加载/解析index.js之前执行。您可以使用jQuery ready回调来更改此设置。

<script>
  $(() => {
    $("#form-builder").formBuilder();
  });
</script>

创建jQuery插件时如何使用ES6模块？

1 个答案: