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

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

提问by dan

I have installed foundation via jspm install foundation, then import foundation and jquery.

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

The problem I am having is that if I import jquery via import $ as 'jquery'I get the error jquery_1.default is not a function. If I import jquery via import * as $ from jqueryit works as expected

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

I am calling $(document).foundation();to initialize foundations javascript components. Below is my main.ts

我打电话 $(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();
      });
}

The rest of the code is just default navigation to a simple page that contains a foundation nav bar with dropdown list

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

Note: I also had to explicitly install jquery even though jquery is listed as a dep.

注意：即使 jquery 被列为 dep，我也必须显式安装 jquery。

I made the original override for foundation 6, clearly did something wrong but it seemed to be working at the time. However, I have since found out that when bootstrap was installed it put jquery in github:components and that seemed make it so jquery did not have to explicitly be installed. So at the time all seemed fine.

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

To reproduce just use the aurelia skeleton and add a page with a foundation control, adding the $(document).foundation() as above

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

采纳答案by Ced

If you are using typescript set module=system in your tsconfig:

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

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

回答by dan

I believe this is an issue with typescript. From what I can tell it does not respect the es6 style import statement for legacy code, ie code that does not have an export. If you use the old style var $ = require('jquery') it works.

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

The fix for this is to use the --allowSyntheticDefaultImports flag to true.

对此的修复是使用 --allowSyntheticDefaultImports 标志为真。

The first link at the bottom of the the typescript issue describes this fix

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

See these discussions for more detail

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

SystemJS and defaultimport with export =proposal

SystemJS 并default使用export =提案导入

Importing defaults with es6 syntax doesn't work

使用 es6 语法导入默认值不起作用

Can't find proper default variable export syntax

找不到合适的默认变量导出语法

回答by Omer Gurarslan

Add "esModuleInterop": trueline inside compilerOptionsin tsconfig.jsonfile, like following:

在文件中添加 "esModuleInterop": true行，如下所示：compilerOptionstsconfig.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/**/*"
  ]
}

If you are using IntelliJ, it may not detect the change in tsconfig.json immediately, so it can be useful to try restarting IntelliJ to see if it works.

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

Important Note:

重要的提示：

Please note that this time, import * as express from 'express';notation will generate an error.

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

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

请参阅 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();).

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