Question

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

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

我正在调用$(document).foundation();来初始化基础javascript组件。以下是我的主要内容

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做了原始覆盖，显然做错了什么，但它似乎在当时工作。但是，我已经发现当安装bootstrap时它将jquery放在github：components中，这似乎使得jquery不必显式安装。所以当时一切似乎都很好。

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

Answer 1

我认为这是打字稿的问题。据我所知，它不尊重遗留代码的es6样式import语句，即没有导出的代码。如果你使用旧样式var $ = require（＆＃39; jquery＆＃39;）它可以工作。

对此的修复是使用--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 2

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

{
"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 *如“ express”中的express; express（）;）将需要转换为默认导入（import express from“ express”中的express ;; express（）;）。

Answer 3

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

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

Answer 4

我的问题不是twist，而是jQuery。但是，由于Google在我搜索了问题之后带领我来到这里，我认为这是sharp的常见问题，因此，此答案将有助于其他人在其他模块上遇到同样的问题。（但相同的错误）
而且我不想更改我的ts文件，因为它似乎不正确。

所以我找到了这个解决方案，希望它也对您有用：
代替ts.config
我使用了：import sharp from "sharp";

因此您的情况是： import * as sharp from "sharp";

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

4 个答案: