SystemJS：为什么在导入 jquery 时出现错误 jquery_1.default 不是函数

Question

我已经通过 jspm install foundation 安装了 foundation，然后导入 foundation 和 jquery.

我遇到的问题是，如果我通过 import $ as 'jquery' 导入 jquery，我会得到错误 jquery_1.default 不是函数。如果我通过 import * as $ from jquery 导入 jquery 它会按预期工作

我正在调用 $(document).foundation(); 来初始化基础 javascript 组件。下面是我的main.ts

import 'foundation'
import $ from  'jquery';
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();    

  aurelia.start().then(a => a.setRoot())
      .then(a => {
        // Initialize framework
        $(document).foundation();
      });
}

其余代码只是默认导航到一个简单页面，该页面包含带下拉列表的基础导航栏

注意：即使 jquery 被列为依赖项，我也必须明确安装 jquery。

我对基础 6 进行了原始覆盖，显然做错了什么，但当时似乎可以正常工作。但是，我后来发现，当安装 bootstrap 时，它会将 jquery 放在 github:components 中，这似乎使 jquery 不必显式安装。所以当时看起来一切都很好。

要重现只需使用 aurelia 骨架并添加一个带有基础控件的页面，如上添加 $(document).foundation()

Answer 1

如果您在 tsconfig 中使用 typescript set module=system:

{
  "compilerOptions": {
    "module": "system",
    "target": "es6",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Answer 2

我认为这是打字稿的问题。据我所知，它不尊重遗留代码的 es6 样式导入语句，即没有导出的代码。如果您使用旧样式 var $ = require('jquery') 它会起作用。

解决此问题的方法是将 --allowSyntheticDefaultImports 标志设置为 true。

typescript 问题底部的第一个 link 描述了此修复

有关更多详细信息，请参阅这些讨论

SystemJS and default import with export = proposal

Importing defaults with es6 syntax doesn't work

Can't find proper default variable export syntax

Answer 3

在 tsconfig.json 文件的 compilerOptions 内添加 "esModuleInterop": true 行，如下所示：

{
"compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,  // <-- ADD THIS LINE
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    }
},
"include": [
    "src/**/*"
  ]
}

如果您使用的是 IntelliJ，它可能无法立即检测到 tsconfig.json 中的更改，因此尝试重新启动 IntelliJ 以查看它是否有效会很有用。

重要提示：

请注意，这次 import * as express from 'express'; 符号会产生错误。

参见 TypeScript 2.7 参考 (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html):

Note: The new behavior is added under a flag to avoid unwarranted breaks to existing code bases. We highly recommend applying it both to new and existing projects. For existing projects, namespace imports (import * as express from "express"; express();) will need to be converted to default imports (import express from "express"; express();).

Answer 4

我的问题不在于 jQuery，而在于 sharp。但是，在我搜索我的问题后，google 将我带到这里，我认为这是 ts 的一个常见问题，因此这个答案将帮助其他人解决与其他模块相同的问题。（但是同样的错误）
而且我不想更改我的 ts.config 文件，因为它似乎不正确。

所以我找到了这个解决方案，希望它也对你有用：
而不是 import sharp from "sharp";
我用过：import * as sharp from "sharp";

所以在你的情况下会是： import * as $ from 'jquery';

SystemJS：为什么在导入 jquery 时出现错误 jquery_1.default 不是函数

SystemJS: Why am getting error jquery_1.default is not a function when importing jquery

jquery

typescript

systemjs

jspm