如何在 Ember.js 项目中导入 ES2015 JavaScript 模块

How to import a ES2015 JavaScript module in an Ember.js project?

本文关键字：导入 ES2015 JavaScript 模块 项目 Ember js      更新时间：2023-09-26

我想在我的Ember.js项目中使用JavaScript模块（ES2015），但它不起作用。

我写了一个简单的示例 ES6 JavaScript 文件，

myES6lib.js

export default function square(b) {
  return b * b;
};

在管理依赖之后，我运行了

ember generate vendor-shim myES6lib

并在 ember-cli-build 中添加了一行.js

app.import("vendor/shims/myES6lib.js");

然后我在 Ember 控制器中调用了 square 函数

import MyES6lib from "myES6lib";
...
console.log("Square(5) = " + MyES6lib.square(5));

但我收到如下错误消息：

Uncaught TypeError: _myES6lib.default.square is not a function

任何提示都值得赞赏，提前感谢。

注意：我试图通过 Babel 将 myES6lib 转换为 ES5 代码，但结果是一样的。

默认导出是 square 函数，因此不要像这样调用它：

console.log("Square(5) = " + MyES6lib.square(5));

你需要这样称呼它：

console.log("Square(5) = " + MyES6lib(5));

你的函数看起来更像是一个实用程序函数，把它移到yourApp/utils/square，在这种情况下你不需要命名这个函数，因为它是文件中唯一的函数：

export default function(b) {
  return b * b;
};

然后只需将其导入您的文件：

import myCustomSquare from 'myApp/utils/square';

并使用它myCustomSquare(2);

文件中的多个函数：

您将遵循与单个文件相同的逻辑，但在文件内部您将导出每个函数：

export function square(b) {
  //your logic goes here 
}
export function myOtherCustomFunction(b) {
  //your logic goes here 
}

从您的控制器/其他任何地方，您可以像这样导入它：

import { square, myOtherCustomFunction } from 'myApp/utils/myCustomFunctions'

相关文章：