如何使用ES6导入（客户端JS）

Question

我正在尝试使用 VeeValidate，示例显示了 ES6 导入的用法，如下所示：

import { Validator } from 'vee-validate';

我的理解是这仅适用于 npm 而不适用于 CDN。我只想写客户端js而不用node js。我是否必须研究 browserify 或 webpack 之类的东西？

我试图从 CDN link 复制 javascript 并将其设为本地 js 文件以供导入，但无法正常运行。是不是因为我没有出口报表才行不通？

Answer 1

正如您所说，问题是目前仅通过 Node.js 全球支持导入。如果你想在客户端快速导入代码，并且jQuery是一个选项，那么你可以使用：

$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
    console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

这将从服务器加载并执行 JavaScript 代码。回调 done 在脚本完成下载时调用，但不一定完成执行。

更多信息，您可以查看official reference

Answer 2

目前90% of all users browser (caniuse.com)支持导入/导出语法。

首先要做的是 将 type="module" 作为 <script> 标签的属性（例如 <script type="module">)

完整示例：

<script type='module' src='module-a.mjs' /> 

<script type="module">
  import * as moduleA from 'module-a.mjs'
</script>

您可能想要添加一个 .mjs 扩展名以明确说明此文件是一个 js 模块，并避免 IDE.

中的语法错误

文档：

Answer 3

试试这个：

const url = './demo.js';
try { import(url).loadPageInto(main);} 
catch (error) { main.textContent = error.message; }

如何使用ES6导入（客户端JS）

How to use ES6 import (client-side JS)

es6-modules

vee-validate