SystemJS：为什么在导入 jquery 时出现错误 jquery_1.default is not a function

Question

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

我遇到的问题是，如果我通过import $ as 'jquery' 导入 jquery，我会收到错误 jquery_1.default is not a function。如果我通过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 被列为 dep，我也必须显式安装 jquery。

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

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

Answer 1

在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)：

注意：新行为添加在一个标志下，以避免对现有代码库进行无根据的中断。我们强烈建议将其应用于新项目和现有项目。对于现有项目，命名空间导入（import * as express from "express"; express();）需要转换为默认导入（import express from "express"; express();）。

Answer 2

我相信这是打字稿的问题。据我所知，它不尊重遗留代码的 es6 样式导入语句，即没有导出的代码。如果你使用旧式的 var $ = require('jquery') 就可以了。

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

打字稿问题底部的第一个链接描述了此修复

查看这些讨论了解更多详情

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

我的问题不是jQuery，而是sharp。但是当我搜索我的问题后谷歌将我带到这里时，我认为这是ts 的一个常见问题，所以这个答案将帮助其他模块遇到同样问题的其他人。 （但同样的错误）
而且我不想更改我的ts.config 文件，因为它似乎不正确。

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

因此，在您的情况下，它将是： import * as $ from 'jquery';

Answer 4

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

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