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; }

Answer 2

您的项目使用的是webpack / babel，我怀疑它没有设置或工作正常。这个答案不会解决这个问题。相反，我将描述使用裸骨ES6的设置。因为它是2018年。

Codepen已添加了一些有关如何使模块在https://blog.codepen.io/2017/12/26/adding-typemodule-scripts-pens/

工作的文档

他们提到，对于Codepen项目，您需要通过将type="module"添加到<script>标记来指定您正在使用模块。所以在index.html中你需要改变

  <script src="scripts/index.js"></script>

到

  <script src="scripts/index.js" type="module"></script>

在我的工作版本中，data.js看起来像这样：

function foo(str) { console.log(`foo prints ${str}`); }

let firstName = 'George'

export { foo, firstName };

index.js看起来像这样：

import {foo, firstName} from './data.js';

foo(firstName);

（顺便说一句，我认为'./data'会在import声明中有用。但不，你需要'./data.js'）

Answer 3

你有两种解决问题的方法。要么：

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

with：

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

在这种情况下，您使用default关键字默认导出 firstName。导入时，您可以任意为其分配相同的名称。（可以使用任何名称导入。）

------------ OR：--------------

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

使用：

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

在这种情况下，您可以使用花括号从firstName模块导入命名导出 data。

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

3 个答案: