未捕获的 SyntaxError：意外的标识符 - 导入 jquery答案

【问题标题】：Uncaught SyntaxError: Unexpected identifier - importing jquery未捕获的 SyntaxError：意外的标识符 - 导入 jquery
【发布时间】：2018-12-06 03:48:48
【问题描述】：

我的网站项目中的导入语句有问题。尝试使用 nodejs - typescript 和 jquery

我的项目文件夹如下所示：

项目
- node_modules
- 公开
  - js
  - jquery/dist（复制形式 node_modules/jquery/dist）
  - index.html
- ts
  - test.ts
package.json
tsconfig.json

package.json:

{
  "name": "testclient",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/jquery": "^3.3.4",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "typescript": "^2.9.2"
  }
}

tsconfig.json：

{
    "compileOnSave": true,
    "compilerOptions": {
        "experimentalDecorators": true,
        "sourceMap": true,
        "strict": true,
        "module": "ES2015",
        "moduleResolution": "Classic",
        "target": "ES5",
        "lib": ["dom", "es5", "es2015", "es2015.promise"],
        "removeComments": true,
        "sourceMap": true,
        "outDir": "public/js",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "ts/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

index.html

<!DOCTYPE html>
<html lang="de">
    <header>
        <title>Test</title>
    </header>
    <body>
        Mein Test
    </body>
    <script type="text/javascript" src="js/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</html>

test.ts

import $  from 'jquery';
$(document).ready(() => {
    console.log('document is ready now');
    console.log($);
});

如果我在我的 chrome 浏览器中启动 index.html 并打开控制台，我会收到错误：

Uncaught SyntaxError: Unexpected identifier test.js:1

我发现 $ 在我称之为 jquery 的那一刻是未知的。所以我不能在我的脚本中使用 jquery

在不使用 ///<reference path=""/> 导入 jquery 的情况下运行它的最佳做法是什么。要设置哪些 tsconfig 参数以使其在浏览器中运行？

【问题讨论】：

顺便说一句，如果我将 test.ts: import $ from 'jquery 更改为 /// <reference path="../node_modules/@types/jquery/index.d.ts" 一切正常。但这不是我搜索的方式。我认为导入语句必须起作用

标签： javascript jquery node.js typescript

【解决方案1】：

不确定我是否完全理解了这个问题（表述起来有点奇怪），但我认为您正在尝试在索引页面中实现 jquery 而无需下载和映射它，您可以通过在代码中实现它来简单地做到这一点：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

你也得到了错误，因为你的 test.js 路径是错误的，应该是

<script type="text/javascript" src="../ts/test.js"></script>

如果我考虑你的映射

【讨论】：

我有 jquery 本地存储的节点，不想从 web 加载它。并且发现js文件没有问题
@mtizziani 好吧，我的错，是否应该在 test.js 中： import {$,jQuery} from 'jquery';如果我没记错的话，你必须使用 {}。
你可以用 require: var jquery = require('jquery') 来加载它。

【解决方案2】：

jquery 和 typescript 存在问题。您很可能需要下载并包含用于 jQuery 的 TypeScript definition file——jquery.d.ts——在您的项目中。在尝试使用 jquery 之前，请确保您已完成以下步骤：

选项 1：安装 @types 包（推荐用于 TS 2.0+）

在您的项目运行中：

npm install --save-dev @types/jquery

然后编译器会自动解析jquery的定义。

选项 2：手动下载

下载here。

选项 3：使用打字

如果您使用的是typings，那么您可以这样包含它：

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

设置好定义文件后，将别名 ($) 导入所需的 TypeScript 文件中即可正常使用。

import $ from "jquery";
// or
import $ = require("jquery");

你的意思是需要用--allowSyntheticDefaultImports 编译——在tsconfig.json中添加"allowSyntheticDefaultImports": true。

【讨论】：

请看描述，@types/jquery 在 package.json 中定义并且已经安装好了。并且 tsconfig 选项设置为 true，否则我得到一个错误 tsc is running
但是你有 jQuery 的 TypeScript 定义文件——jquery.d.ts 吗？
是的，它在 node_modules/@types/jquery/index.d.ts 中。如果未安装 tsc 会产生编译错误，并且我的 id 也会产生错误，但没有错误。顺便说一句，typings 模块已经过时了 ;)