我为建设一个表单生成器创建一个jQuery插件。该代码将是非常漫长的。我不想把一切都在短短的一个文件。要做到这一点，我试图打破一切成ES6模块，但JS是抛出一个语法错误。
未捕获的SyntaxError：意外标识符
遗漏的类型错误：$（...）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);
});
}
我不得不作出两个变化让你的代码运行（在Chrome / Firefox浏览器）：
首先，从MDN
import语句不能在嵌入式脚本中使用，除非这样的脚本都有一个类型=“模块”。
这是一个有点误导：“嵌入脚本”听起来就像将不包括src=脚本...但在实践中似乎并没有它的工作。
<script type="module" src="index.js"></script>
其次，模块脚本是延迟加载，这意味着script实际加载/解析之前最终index.js标签将被执行。您可以通过使用jQuery ready回调改变这一点。
<script>
$(() => {
$("#form-builder").formBuilder();
});
</script>