我怎样才能使用ES6从npm包导入jQuery？

Posted 2021-05-06

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

我不想使用Webpack或require（）并且必须编译它......其他任何东西只是简单的vanilla ES6。

我总是得到这个错误

未捕获的SyntaxError：请求的模块'./node_modules/jquery/dist/jquery.min.js'不提供名为'$'的导出

要么

未捕获的SyntaxError：请求的模块'./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')

答案

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

另一答案

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

从版本65开始，Chrome完全支持ES6模块，但如果我们尝试使用导入/导出关键字导入或导出javascript文件中的模块，它仍会引发错误。

那么，如果没有Webpack / Browserify / Babel使ES6模块工作，你需要做什么才能在index.html文件中添加下一个脚本标记：

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