如何仅使用 ES6 从 npm 包中导入 jQuery？答案

【问题标题】：How could I import jQuery from npm package using ES6 only?如何仅使用 ES6 从 npm 包中导入 jQuery？
【发布时间】：2023-04-04 03:51:01
【问题描述】：

我使用 npm -install jquery 安装了 jQuery，它在我的项目中创建了一个 node_modules 文件夹，其中包含 jquery。但是当我尝试使用 ES6 import 导入它时，它给了我一个错误。

我不想使用 Webpack 或 require() 并且必须编译它......其他任何东西都只是普通的香草 ES6。

我总是遇到这个错误

未捕获的语法错误：请求的模块 './node_modules/jquery/dist/jquery.min.js' 不提供导出命名为“$”

或

未捕获的语法错误：请求的模块 './node_modules/jquery/src/jquery.js' 不提供名为 '$'

项目结构

.
├── index.html
├── app.js
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.js
│   │   │   ├── jquery.min.js
│   │   ├── src/
│   │   │   ├── jquery.js
└── package.json

app.js

import { $ } from './node_modules/jquery/dist/jquery.min.js'; // <-- does not work
import { $ } from './node_modules/jquery/src/jquery.js'; // <-- does not work
window.$ = $;

$('body').css('background-color', 'red')

【问题讨论】：

但是等等。 jQuery 是一个客户端库，你想在 Node 中导入它吗？然后在带有$('body').css() 的Node 中使用它？我错过了什么？
不，我只是想将 npm 用作包管理器并将其包含在浏览器中。
那么<script src="jquery.js"> 有什么问题？
并尝试使用$ 而不是{ $ }。
只是 import './node_modules/jquery/dist/jquery.min.js' 为我工作。

标签： javascript jquery npm

【解决方案1】：

尝试npm install jquery，然后尝试import $ from "jquery"。

【讨论】：

未捕获的类型错误：无法解析模块说明符“jquery”。相对引用必须以“/”、“./”或“../”开头。
哦，你没有使用 webpack。然后你不能导入/导出东西。只需将 jquery 脚本包含到 html 文件的头部即可。之后，您可以在代码中使用 $，而无需导入任何内容。
您可以使用导入/导出，将 Webpack 与 Babel 一起使用。否则坚持简单的
我可以在任何没有 webpack 的现代浏览器中使用导入/导出。这是 ES6 语法。
@Liga 通过使用 import jquery，您的意思是引用 node_modules/jquery。尝试使用 import import $ from './node_modules/jquery

【解决方案2】：

目前，浏览器才开始支持此功能。许多转译器（例如 TypeScript 和 Babel）以及捆绑器（例如 Webpack）都提供了完整的实现。

自 65 版以来，Chrome 已完全支持 ES6 模块，但如果我们尝试使用 import/export 关键字在 JavaScript 文件中导入或导出模块，它仍然会引发错误。

那么要让 ES6 模块在没有 Webpack/Browserify/Babel 的情况下工作，你必须做的是在你的 index.html 文件中添加下一个脚本标签：

<script type="module" src="ES6-Node.js"></script>

【讨论】：

据我所知所有现代浏览器都支持 ES6 导入/导出