Question

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

我不想使用Webpack或require（）并必须对其进行编译……其他任何东西都只是普通的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')

Answer 1

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

Answer 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从npm包中导入jQuery？

2 个答案: