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

【问题标题】：How to use ES6 import (client-side JS)如何使用 ES6 导入（客户端 JS）
【发布时间】：2018-08-11 04:01:31
【问题描述】：

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

import { Validator } from 'vee-validate';

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

我尝试从 CDN 链接复制 javascript 并将其设置为本地 js 文件以进行导入，但无法使其正常工作。是因为我没有出口声明而不起作用吗？

【问题讨论】：

如果您在本地复制，您还需要指定路径，默认情况下它会在 node_modules 中查找。

标签： es6-modules vee-validate

【解决方案1】：

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

您可以使用它来“包含”您的脚本。首先要做的是将type="module" 作为<script tag> 的属性（例如<script type="module">）

然后你可以在你的js脚本中import/export。 YES 模块需要导出一个值（变量、函数...）才能在另一个脚本中使用它，但这是可选的，因为您可以执行脚本而无需导出某些内容。

文档：

请记住，这还不是一个完全受支持的功能，如果您介意浏览器兼容性，您将需要一个 polyfill

【讨论】：

【解决方案2】：

正如您所说，问题是目前仅通过 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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：