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

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

在文件中添加 "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/**/*"
  ]
}

如果您使用的是 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样式import语句,即没有导出的代码.如果你使用旧样式var $ = require('jquery')它可以工作.

解决此问题的方法是使用--allowSyntheticDefaultImports标志为true.

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

有关详细信息,请参阅这些讨论

SystemJS并default通过export =提案导入

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

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

Answer 3

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

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