javascript - 在 Codepen 项目中使用 Javascript ES6 导入和导出功能

Question

我正在尝试在我的 Codepen project 中使用 Javascript ES6 导入/导出功能，我认为它是基于一些支持的 articles我读过，但我无法让它工作。我已经将我的 Codepen 项目设置为使用 Webpack 和 Babel 来处理我的 javascript 文件，甚至尝试使用 Chrome Canary 看看它是否支持 ES6(无济于事)。

在我的 Codepen 项目中，我写了一个从一个文件导出字符串变量的基本示例:

//data.js
export let firstName = 'George';

然后将其导入我的主要 javascript 文件以登录控制台:

//index.js
import firstName from "./data";
console.log(FirstName);

不幸的是，Chrome 控制台正在报告错误:

Uncaught VM3034 index.js:1
SyntaxError: Unexpected token import

如果可能的话，有人知道如何让它工作吗？我什至找到了另一个 Codepen project using ES6 import/export successfully 的例子，但我不确定我做了什么不同的事情来得到错误。任何帮助将不胜感激。

Answer 1

这是一个工作示例:

导入 https://codepen.io/oneezy/pen/jzWjLe

import { getNodes } from 'https://codepen.io/oneezy/pen/BrjgdY.js';

let videoHTML = getNodes(`
  <div class="widget">
    <h2>I'm a widget!</h2>
    <p>I do widgeting.</p>
  </div>
`);

document.body.appendChild(videoHTML[0]);

导出 https://codepen.io/oneezy/pen/BrjgdY

export function getNodes(str) { 
  return new DOMParser().parseFromString(str, 'text/html').body.childNodes;
}