Question

我正在学习systemjs和整个ES6模块向后移植到旧浏览器。

作为一个教育作品，我正在尝试加载jquery并做一个简单的“Hello world！”使用public class ConsoleThread extends Thread{ public ConsoleThread() { Application.launch(Console.class); } public void printToConsole(String text) { Console.printGameInfo(text); } public String textFromConsole() { return Console.getTextField(); }

现在，我让systemjs运行到加载typescript和jquery的点，但是在页面加载后几秒钟失败并出现以下错误：

alert()

该页面只是一个巨大的红色框，如果它被点击，它应该只是警告“Hello world”。

这是标记：

Error: (SystemJS) jquery_1.$ is not a function
    TypeError: jquery_1.$ is not a function
        at execute (http://localhost/webpMain/main.js!transpiled:12:22)
    Error loading http://localhost/webpMain/main.js
        at execute (http://localhost/webpMain/main.js!transpiled:12:22)
    Error loading http://localhost/webpMain/main.js

systemjs配置文件：

<!DOCTYPE html>
<html lang="us">
    <head>
        <title>SystemJS Test</title>
        <script src="node_modules\systemjs\dist\system.js"></script>
        <script src="system.config.js"></script>
        <style>
            #box {
                width: 300px;
                height: 300px;
                position: absolute;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>

        System.import("app")
        .catch(function(err) {
            console.log(err);
        });

    </script>
</html>

System.config({ paths: { "npm:*": "node_modules/*" }, map: { app: 'webpMain', 'typescript': 'npm:typescript/lib/typescript.js', 'jquery': 'npm:jquery/dist/jquery.min.js' }, packages: { app: { main: 'main.js' } }, transpiler: 'typescript', });

main.js

为什么jquery导入不起作用的任何想法？
什么是显示该错误，打字稿或systemjs？

Answer 1

正确的代码是

import $ from "jquery";

$("box").click(function() {
  alert("Hello world!!");
});

jQuery不会导出任何名为$的内容。

此外，由于您使用TypeScript进行转换，因此您的包配置应该类似于

packages: {
  app: {
    main: 'main.ts',
    defaultExtension: 'ts'
  }
}

目前您正在进行两次转换。

SystemJS：jquery_1。$不是函数

1 个答案: