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

Question

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

import { Validator } from 'vee-validate';

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

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

Answer 1

目前90% 的用户浏览器 (caniuse.com)支持导入/导出语法。

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

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

文档：

• 进口
• 出口
• 关于如何在浏览器中使用模块的非常好的文章

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

Answer 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，但不一定完成执行。

更多信息，您可以查看官方参考

Answer 3

尝试这个 ：

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